Below example shows StockChart with OHLC being rendered using data from JSON API & AJAX request. You can also use CSV, XML or any external data source in order to separate data from UI.
window.onload = function () { var dataPoints1 = [], dataPoints2 = []; var stockChart = new CanvasJS.StockChart("chartContainer",{ colorSet: "colorSet2", title:{ text:"Litecoin Price" }, charts: [{ axisY: { prefix: "€" }, data: [{ type: "ohlc", yValueFormatString: "€#,###.00", dataPoints : dataPoints1 }] }], navigator: { data: [{ type: "area", dataPoints: dataPoints2 }], slider: { minimum: new Date(2018, 06, 01), maximum: new Date(2018, 07, 01) } } }); $.getJSON("https://canvasjs.com/data/docs/ltcusd2018.json", function(data) { for(var i = 0; i < data.length; i++){ dataPoints1.push({x: new Date(data[i].date), y: [Number(data[i].open), Number(data[i].high), Number(data[i].low), Number(data[i].close)]}); dataPoints2.push({x: new Date(data[i].date), y: Number(data[i].close)}); } stockChart.render(); }); }