[Chartjs]-How to register plot or label click event in chart.js

by

1👍

✅

onCLick Event

Called if the event is of type ‘mouseup’ or ‘click’. Called in the
context of the chart and passed an array of active elements

When you click on point it will call the function by passing two parameters mouseEvent and an array of a chart. From chart array, you can extract the label.

 options: {
        onClick : function(mouseEvent,chart){

        }
    }

[Sample-code]

var ctx = document.getElementById("myChart1");
var label = ["January", "February", "March", "April", "May", "June", "July"];
var data = [65, 59, 80, 81, 56, 55, 40]
var lineChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: label,
                datasets: [{
                    label: "Logined users num",
                    backgroundColor: "rgba(38, 185, 154, 0.31)",
                    borderColor: "rgba(38, 185, 154, 0.7)",
                    pointBorderColor: "rgba(38, 185, 154, 0.7)",
                    pointBackgroundColor: "rgba(38, 185, 154, 0.7)",
                    pointHoverBackgroundColor: "#fff",
                    pointHoverBorderColor: "rgba(220,220,220,1)",
                    pointBorderWidth: 1,
                    data: data
                }]
            },
             options: {
        onClick : function(mouseEvent,chart){
               var myLabel = label[chart[0]._index];
               var y = this.data.datasets[chart[0]._datasetIndex].data[chart[0]._index];
            }
        }

});

P.S :- It will only work if you click on chart or points not for label.

Leave a comment