OHLC

For Open-High-Low-Close (OHLC) charts.

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
<script src="http://canvasjs.com/assets/script/canvasjs.min.js" type="text/javascript"></script>

<div class="chart_cont">
    <div id="chart_div"></div>
</div>

JavaScript

$(function () {

		var options = {
        width: 300, height: 185,
        title: { text: "Candlesticks" },
        axisX: { title: "year", labelAngle: -45 },
        axisY: { title: "price" },
    };
    
		var dataSource = [
		{ year: 2000, high: 65, low: 38, close: 60, open: 42 },
        { year: 2001, high: 72, low: 41, close: 53 },
        { year: 2002, high: 62, low: 25, close: 38 },
        { year: 2003, high: 65, low: 25, close: 45 },
        { year: 2004, high: 82, low: 40, close: 78 },
        { year: 2005, high: 83, low: 50, close: 54 },
        { year: 2006, high: 64, low: 25, close: 43 },
        { year: 2007, high: 56, low: 15, close: 25 },
        { year: 2008, high: 49, low: 10, close: 38 },
        { year: 2009, high: 76, low: 28, close: 59 },
        { year: 2010, high: 69, low: 40, close: 42 },
        { year: 2011, high: 62, low: 30, close: 38 },
        { year: 2012, high: 40, low: 10, close: 15 },
        { year: 2013, high: 34, low: 12, close: 29 },
        { year: 2014, high: 72, low: 22, close: 65 },
        { year: 2015, high: 80, low: 40, close: 46 },
        { year: 2016, high: 48, low: 5, close: 12 }
    ];

		options.data = [{ name: "year", type: "ohlc", dataPoints: [ ] }];
    for (var i = 0; i < dataSource.length; i++)
        options.data[0].dataPoints.push({
            x: dataSource[i].year,
            y: [
                (i == 0 ? dataSource[i].open : dataSource[i - 1].close),
                dataSource[i].high,
                dataSource[i].low,
                dataSource[i].close
            ] });
            
		// change this to different values: 5, 10, 15, 20....
		options.dataPointWidth = 0;
    
    new CanvasJS.Chart("chart_div", options).render();
});