JavaScript OHLC Charts & Graphs

Download JavaScript Chart Samples

OHLC charts are similar to Candle Stick Charts except that tick marks to the left and right of vertical line are used to show Opening and Closing Prices. OHLC Charts are easily customizable, interactive, responsive, support animation, zooming, panning & exporting as image. Given example shows simple OHLC Chart along with HTML / JavaScript source code that you can edit in-browser or save to run locally.

Try Editing The Code

window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	animationEnabled: true,
	exportEnabled: true,
	exportFileName: "Tesla-StockChart",	
	title:{
		text: "Tesla Stock Price - 2016"
	},
	axisX: {
		interval:1,
		intervalType: "month",
		valueFormatString: "MMM"
	},
	axisY: {
		prefix: "$",
		title: "Price (in USD)"
	},
	data: [{
		type: "ohlc",
		yValueFormatString: "$###0.00", 
		xValueFormatString: "MMM YYYY",
		dataPoints: [
			{ x: new Date(2016, 00, 01), y: [230.720001, 231.380005, 182.410004, 191.199997] },
			{ x: new Date(2016, 01, 01), y: [188.759995, 199.520004, 141.050003, 191.929993] },
			{ x: new Date(2016, 02, 01), y: [194.250000, 239.880005, 181.500000, 229.770004] },
			{ x: new Date(2016, 03, 01), y: [244.830002, 269.339996, 233.250000, 240.759995] },
			{ x: new Date(2016, 04, 01), y: [241.500000, 243.190002, 203.660004, 223.229996] },
			{ x: new Date(2016, 05, 01), y: [221.479996, 240.850006, 187.869995, 212.279999] },
			{ x: new Date(2016, 06, 01), y: [206.139999, 235.279999, 206.000000, 234.789993] },
			{ x: new Date(2016, 07, 01), y: [235.500000, 236.630005, 208.649994, 212.009995] },
			{ x: new Date(2016, 08, 01), y: [209.009995, 211.100006, 193.449997, 204.029999] },
			{ x: new Date(2016, 09, 01), y: [212.300003, 215.669998, 192.000000, 197.729996] },
			{ x: new Date(2016, 10, 01), y: [198.039993, 199.350006, 178.190002, 189.399994] },
			{ x: new Date(2016, 11, 01), y: [188.250000, 223.800003, 180.000000, 213.690002] }
		]
	}]
});
chart.render();

}

Related Customization

You can enable zooming capability by setting zoomEnabled to true. Some other common customizations are color, animationEnabled etc.