Accepted answer

This demo gives the value in the bar chart when you click on it. I'm not a chart.js expert so there may be better solutions.

/* from */
document.getElementById("myChart").onclick = function (evt) {
        var activePoints = myChart.getElementsAtEventForMode(evt, 'point', myChart.options);
        var firstPoint = activePoints[0];
        var label =[firstPoint._index];
        var value =[firstPoint._datasetIndex].data[firstPoint._index];
        alert(label + ": " + value);


I needed a way to get the chart from the callback because I'm using the same callback for multiple charts, so I can't just say myChart

This works, passing to chart options - the second parameter is called "activeElements" and can be used to get the chart:

onClick: (event, activeElements) => {
    if(activeElements.length === 0){
      alert("Chart is clickable but you must click a data point to drill-down")
    const chart = activeElements[0]._chart
    const activePoints = chart.getElementsAtEventForMode(event, 'point', chart.options);
    const firstPoint = activePoints[0];
    const label =[firstPoint._index];
    const value =[firstPoint._datasetIndex].data[firstPoint._index];
    alert(label + ": " + value);


Chart.js version = 3.2.1

From the official documentation:

onClick: (evt) => {
    const points = myChart.getElementsAtEventForMode(evt, 'nearest', { intersect: true }, true);

    if (points.length) {
        const firstPoint = points[0];
        var label =[firstPoint.index];
        var value =[firstPoint.datasetIndex].data[firstPoint.index];
        alert(label +" : "+ value);

Related Query

More Query from same tag