How to disable chartjs legendclick

To override the default behavior of clicking on a legend item, that is showing/hiding the associated dataset in the chart, you may use the following option (shown inside options for clarity):

options: {
    legend: {
        onClick: function(event, legendItem) {}
    }
}

This is the way to override the default behavior, that is by supplying a function with the same arguments. According to your requirements, this function should have an empty body (and, thus, return immediately), since absolutely nothing should happen when clicking on a legend item. Look for legend.onClick in the docs. While it currently appears under only two chart types, this option should work for all chart types.


According to the docs there is a onClick handler for the legend exposing the event object. If you stopPropagation it stops the data series hiding:

        let chart = new Chart(elem.find('canvas')[0], {
                type: 'line',
                data: {
                    labels: [],
                    datasets: []
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    legend: {
                        onClick: (e) => e.stopPropagation()
                    }
                }
            });

The above is ES6, if your not using a supported browser below is the older ES5 equivilant.

legend: {
    onClick: function (e) {
        e.stopPropagation();
    }
}

Chartjs must register its own click event after the legend.onClick which is why this stop it executing.

docs


At the time of writing (Chart.js v3.5.1), the correct answer is

options: {
  plugins: {
    legend: {
      onClick: null
    }  
  }
}

As per Natan Almeida de Lima's comment above. Adding it as an answer since I didn't see it as a one-line comment which I only found after figuring it out for myself.


Also, you can use null or any value which is evaluated false to disable click event on all legend.

options: {
    legend: {
        onClick: null
    }
}

Note: Ignore click event by onClick on following code in Chart.js ( https://github.com/chartjs/Chart.js/blob/6bea15e7cf89003e3a5945a20cf1d2cc5096728e/src/plugins/plugin.legend.js#L481 )