javascript - chartJS: How to return the closest x-axis label on click

Question

I have a chartJS line graph, with x-axes labels being the last 72 hours on each hour mark ( for example: [8:00am, 9:00am, 10:00am,...]). Is there a way I can return the closest xAxis label on click? I have found a way to return the x-y coordinates of the graph, but these coordinates are in pixels, and the graph is able to resize its self based on the size of the browser window. If I were to take into account for the current browser window size, and the number of labels displaying, I could calculate which label would be closest, but I am hoping that there is an easier way to do this.

One Idea I have is to return the label that the "ToolTip" is on, on Click. This would be logically equivalent, as in my options I have the tooltip always display for the closest tick whenever the mouse is on the graph. Would it be possible to return the tooltips label onclick?

My ultimate goal is to have access to the nearest x-axis label (as a string) when I click on the graph. Is this possible?

question from:https://stackoverflow.com/questions/65854737/chartjs-how-to-return-the-closest-x-axis-label-on-click

Answer 1

You can add a custom onclick function to the chart and then ask chartjs for the elements at that location.

See this issue for the complete answer with example: get yLabel value onclick chart js

document.getElementById("myChart").onclick = function (evt) {
        var activePoints = myChart.getElementsAtEventForMode(evt, 'point', myChart.options);
        var firstPoint = activePoints[0];
        var xLabel = myChart.data.labels[firstPoint._index];
        // Do things with your x label
    };