Formatting ToolTip Content (dateTime-Format) - CanvasJS JavaScript Charts
Formatting ToolTip Content (dateTime-Format) - CanvasJS JavaScript Charts
by canvasjs
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 chart = new CanvasJS.Chart("chartContainer",
{
title: {
text: "Formatting toolTip Content"
},
toolTip: {
contentFormatter: function (e) {
var content = "";
for (var i = 0; i < e.entries.length; i++){
content = CanvasJS.formatDate(e.entries[i].dataPoint.x, "HH-mm-ss MM/DD/YYYY");
}
return content;
}
},
axisY: {
includeZero: false
},
data: [
{
type: "spline",
dataPoints: [
{ x: new Date(2010, 3, 3, 10, 10, 30), y: 650 },
{ x: new Date(2010, 3, 5, 10, 20), y: 700 },
{ x: new Date(2010, 3, 7, 10, 20, 30), y: 710 },
{ x: new Date(2010, 3, 9, 10, 20, 10), y: 658 },
{ x: new Date(2010, 3, 11, 10, 25, 00), y: 734 },
{ x: new Date(2010, 3, 13, 10, 28, 10), y: 963 },
{ x: new Date(2010, 3, 15, 10, 20, 00), y: 847 },
{ x: new Date(2010, 3, 17, 10, 20, 00), y: 853 },
{ x: new Date(2010, 3, 19, 10, 20, 00), y: 869 },
{ x: new Date(2010, 3, 21, 10, 20, 00), y: 943 },
{ x: new Date(2010, 3, 23, 10, 20, 00), y: 970 }
]
}
]
});
chart.render();