Find the Pixel Coordinate on Date-Time axis using convertValueToPixel - CanvasJS JavaScript Charts
Find the Pixel Coordinate on Date-Time axis using convertValueToPixel - 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: "Find Pixel Coordinate on Date-Time Axis using convertValueToPixel"
},
data: [
{
type: "line",
dataPoints: [
{ x: new Date(2012, 01, 1), y: 26 },
{ x: new Date(2012, 01, 3), y: 38 },
{ x: new Date(2012, 01, 5), y: 43 },
{ x: new Date(2012, 01, 7), y: 29 },
{ x: new Date(2012, 01, 11), y: 41 },
{ x: new Date(2012, 01, 13), y: 54 },
{ x: new Date(2012, 01, 20), y: 66 },
{ x: new Date(2012, 01, 21), y: 60 },
{ x: new Date(2012, 01, 25), y: 53 },
{ x: new Date(2012, 01, 27), y: 60 }
]
}
]
});
chart.render();
var xValue = new Date(2012, 01, 13);
var xValueInPixels = chart.axisX[0].convertValueToPixel(xValue.getTime());
console.log(xValueInPixels);