Using DateTime value on Y Axis - CanvasJS JavaScript Charts
Using DateTime value on Y Axis - CanvasJS JavaScript Charts (Time(X axis) and day(Y-axis))
HTML
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
JavaScript
var z;
var chart = new CanvasJS.Chart("chartContainer",
{
axisX: {
},
axisY: {
interval: (1 * 60 * 60 * 1000 * 24),
labelFormatter: function(e){
return CanvasJS.formatDate(e.value, "DD MMM YYYY");
},
crosshair: {
enabled: true,
labelFormatter: function(e){
z= e.value;
console.log(z);
return CanvasJS.formatDate(e.value, "DD MMM YYYY");
}
},
},
//suffix : " hour"
toolTip:{
contentFormatter: function(e){
return "Elapsed Time: " + ((z.toFixed()-e.entries[0].dataPoint.y[0])/(e.entries[0].dataPoint.y[1]-e.entries[0].dataPoint.y[0])).toFixed(2)
+"| End Period: " + CanvasJS.formatDate(e.entries[0].dataPoint.y[1], "DD MMM YYYY");
}},
data: [
{
type: "rangeBar",
dataPoints: [
]
}
]
});
chart.render();