onClick : handleClick

Question

I am using chart.js version 2.8.0. I want to add a click event on any data point to drill down to more details of that datapoint. I added following under options of a line chart:

options: {
  events: ['click', 'mousemove', 'touchstart', 'touchmove'],
  onClick: handleClick
}

Then I have a js function:

function handleClick(evt, legendItem, index, con) {
  debugger;
  var activeElement = getTrafficTypeChartId().getElementAtEvent(evt);
  var ar = $('#datePicker').val().split('/');
  reloadChart(ar.reverse().join(''), activeElement[0]._chart.data.labels[activeElement[0]._index].substring(0, 2));
}

The click event is registered for the entire chart. So what is happening is that when I click legend of the chart, The legend is not sticking out and corresponding effect is not coming on the chart. So the legend has become non-useful.

I tried to add function on the legend: the property itself but that does not get executed, only the handler under options: get executed: https://www.chartjs.org/docs/2.7.2/configuration/legend.html?h=onclick

How do I make the legend click work as usual and still have custom functionality on datapoint click?

Without knowing more, this sounds like it might be an event propagation issue. Try adding `evt.stopPropagation()` as your first line in `handleClick`. See https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation — Brett East, Feb 14 '20 at 00:36

score 0 · Answer 1 · answered Feb 14 '20 at 05:10

I suggest you add a class or id to each part of your pie chart. using this link or try this below method

  var defaultLegendClickHandler = Chart.defaults.global.legend.onClick;
        var newLegendClickHandler = function (e, legendItem) {
        var index = legendItem.datasetIndex;

       if (index > 1) {
           // Do the original logic
          defaultLegendClickHandler(e, legendItem);
       } 
   };

score 0 · Answer 2 · answered Feb 14 '20 at 05:24

Even if you define your own onClick handler, click events are still propagated to be handled elsewhere. As you can see in below code snippet, when you click on the legend, "onClick" is written to the console and individual slices of the pie chart are hidden or shown.

function handleClick(evt, legendItem, index, con) {
  console.log('onClick');
}

var pieChart = new Chart("myChart", {
  type: 'pie',
  data: {
    labels: ["Red", "Blue", "Yellow"],
    datasets: [{      
      data: [8, 5, 6],
      backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
    }]
  },
  options: {
    events: ['click', 'mousemove', 'touchstart', 'touchmove'],
    onClick: handleClick
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="myChart"></canvas>

The problem must be that on each click, you re-create the chart from scratch as following line may suggest:

reloadChart(ar.reverse().join(''), activeElement[0]._chart.data.labels[activeElement[0]._index].substring(0, 2));

onClick : handleClick

2 Answers2