Below StockChart uses jQuery to show Price & Volume using multiple charts with Date-Time axis.
$(function () { var dataPoints1 = [], dataPoints2 = [], dataPoints3 = []; var stockChartOptions = { theme: "light2", exportEnabled: true, title:{ text:"Litecoin Price & Volume" }, charts: [{ toolTip: { shared: true }, axisX: { lineThickness: 5, tickLength: 0, labelFormatter: function(e) { return ""; } }, axisY: { prefix: "€", tickLength: 0 }, legend: { verticalAlign: "top" }, data: [{ showInLegend: true, name: "Price (in EUR)", yValueFormatString: "€#,###.##", type: "candlestick", dataPoints : dataPoints1 }] },{ height: 100, toolTip: { shared: true }, axisY: { prefix: "€", tickLength: 0, labelFormatter: addSymbols }, legend: { verticalAlign: "top" }, data: [{ showInLegend: true, name: "Volume (LTC/EUR)", yValueFormatString: "€#,###.##", dataPoints : dataPoints2 }] }], navigator: { data: [{ dataPoints: dataPoints3 }], slider: { minimum: new Date(2018, 02, 01), maximum: new Date(2018, 04, 01) } } } $.getJSON("https://canvasjs.com/data/docs/ltceur2018.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].volume_eur)}); dataPoints3.push({x: new Date(data[i].date), y: Number(data[i].close)}); } $("#chartContainer").CanvasJSStockChart(stockChartOptions); }); function addSymbols(e){ var suffixes = ["", "K", "M", "B"]; var order = Math.max(Math.floor(Math.log(Math.abs(e.value)) / Math.log(1000)), 0); if(order > suffixes.length - 1) order = suffixes.length - 1; var suffix = suffixes[order]; return CanvasJS.formatNumber(e.value / Math.pow(1000, order)) + suffix; } });