Chartjs-How to get pixel of time value in ChartJs to draw a line?

2👍

Chart.js converts the dates on the x-axis to numbers that represent the time. Therefore, prior to invoke getPixelForValue, you also need to convert the specific date to time, using Date.getTime() as shown below.

const connectorLines = {
    id: 'connectorLines',
    beforeDraw(chart, args, options) {
        const xAxis = chart.scales.x;
        const xValue = new Date('2021-11-07T00:23:35').getTime();
        console.log(xAxis.getPixelForValue(xValue));
        ...
    }
};

Leave a comment