JavaScript
window.onload = function() {
var chart = new CanvasJS.Chart("chartContainer", {
axisX: {
valueFormatString: "M-D"
},
axisY: {
prefix:"$ "
},
toolTip: {
shared: true
},
data: [{
type: "candlestick",
xValueType: "dateTime",
yValueFormatString: "$ #,##0.00",
xValueFormatString: "DD MMM YY",
color: "black",
fallingColor: "#E40A0A",
risingColor: "green",
dataPoints: [{"x":1754283600000,"y":[351.16,351.21,338.04,338.85]},{"x":1754370000000,"y":[339.305,342.735,337.35,338.74]},{"x":1754456400000,"y":[341.65,345.66,339.19,345.62]},{"x":1754542800000,"y":[344.04,347.38,332.65,338.27]},{"x":1754629200000,"y":[338.675,341.5684,336.37,341.05]},{"x":1754888400000,"y":[334.53,343.4035,332.465,333.65]},{"x":1754974800000,"y":[333.52,338.76,330.04,338.43]},{"x":1755061200000,"y":[339.54,351.76,337.55,351.07]},{"x":1755147600000,"y":[349.5,351.5599,346.1,348.58]},{"x":1755234000000,"y":[348.33,357.29,348,354.85]}] },
{
type: "line",
showInLegend: true,
color: "#668cff",
name: "CLOSE",
axisYType: "secondary",
yValueFormatString: "$ #,##0.00",
xValueFormatString: "MMMM",
dataPoints: [{"x":1754283600000,"y":338.85},{"x":1754370000000,"y":338.74},{"x":1754456400000,"y":345.62},{"x":1754542800000,"y":338.27},{"x":1754629200000,"y":341.05},{"x":1754888400000,"y":333.65},{"x":1754974800000,"y":338.43},{"x":1755061200000,"y":351.07},{"x":1755147600000,"y":348.58},{"x":1755234000000,"y":354.85}] }]
});
chart.render();
}