Chartjs-ChartJS distinguish clicks between chart area, dataset and legend

by

0👍

You can use the getElementsAtEvent property. This gives value only when the chart area is clicked, the element is null if it is clicked on the legend. If it is clicked on the chart area then it holds properties from which we can get the clicked xAxis and legend value. 

document.getElementById("yourChartCanvasId").addEventListener("click", function (e) {
    var element = instance.getElementsAtEvent(e)[0];

    if (element) {    
      //Handle click on chart area        
    }
    else {    
      //Handle click on legend area        
    }        
});

Also if you don’t want to do anything on legend click, keeping the default Chart.js behavior then don’t include the else block.

Leave a comment