Below StockChart example shows Price & Volume using multiple charts. API comes with syncing of tooltip across multiple charts as a handy feature. Try moving mouse over datapoints to see tooltip syncing across charts.
window.onload = function () {
var dataPoints1 = [], dataPoints2 = [], dataPoints3 = [];
var stockChart = new CanvasJS.StockChart("chartContainer",{
theme: "light2",
exportEnabled: true,
title:{
text:"Bitcoin Price & Volume"
},
charts: [{
toolTip: {
shared: true
},
axisX: {
lineThickness: 5,
tickLength: 0,
labelFormatter: function(e) {
return "";
}
},
axisY: {
prefix: "$"
},
legend: {
verticalAlign: "top"
},
data: [{
showInLegend: true,
name: "Stock Price (in USD)",
yValueFormatString: "$#,###.##",
type: "candlestick",
dataPoints : dataPoints1
}]
},{
height: 100,
toolTip: {
shared: true
},
axisY: {
prefix: "$",
labelFormatter: addSymbols
},
legend: {
verticalAlign: "top"
},
data: [{
showInLegend: true,
name: "Volume (BTC/USD)",
yValueFormatString: "$#,###.##",
dataPoints : dataPoints2
}]
}],
navigator: {
data: [{
dataPoints: dataPoints3
}],
slider: {
minimum: new Date(2018, 06, 01),
maximum: new Date(2018, 08, 01)
}
}
});
$.getJSON("https://canvasjs.com/data/docs/btcusd2018.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_usd)});
dataPoints3.push({x: new Date(data[i].date), y: Number(data[i].close)});
}
stockChart.render();
});
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;
}
}