CODEWITHSUNDEEP
javascriptchart.js
Nerkyator
Nerkyator

Reputation: 3976

ChartJS doughnut legend click

I have a problem with custom onClick function on doughnut chart. The only thing I need is to override default legend onClick function calling the original one + my custom code. Following their official documentation and this suggestion on github page I wrote this js

var defaultLegendClickHandler = Chart.defaults.doughnut.legend.onClick;

var newLegendClickHandler = function (e, legendItem) {
    console.log(legendItem);
    defaultLegendClickHandler.call(this, e, legendItem);

};

Then I associate it to the onClick option (JSfiddle here) but it is not working. It seems that the legendItem variable is always an empty array so the default click function does nothing.

Upvotes: 1

Views: 973

Answers (2)

h0r53
h0r53

Reputation: 3229

The click handler was set to the chart itself and not the legend. Move the new onClick handler inside of the legend options.

var options = {
    cutoutPercentage: 20,
  responsive: true,
  legend: {
    position: 'top',
    onClick: newLegendClickHandler,
  },
  title: {
    display: true,
    text: 'Chart.js Doughnut Chart'
  },
  animation: {
    animateScale: true,
    animateRotate: true
  }
};

Upvotes: 1

uminder
uminder

Reputation: 26150

Your JSfiddle looks fine except that the newLegendClickHandler is defined at the wrong place inside options. You should define it inside legend as follows.

legend: {
  position: 'top',
  onClick: newLegendClickHandler
},

Please also check Custom On Click Actions from Chart.js documentation

Upvotes: 1

Related Questions