How to set action on slice-click Doughnut in Chart.js

by

1👍

✅

getElementAtEvent has been replaced with chart.getElementsAtEventForMode in Chart.js v3 (see 3.x Migration Guide).

Please take a look at below runnable code and see how it works now:

const pieChart = new Chart("myChart", {
  type: 'pie',
  data: {
    labels: ["Red", "Blue", "Yellow"],
    datasets: [{      
      data: [8, 5, 6],
      backgroundColor: ["#FF6384", "#36A2EB", "#FFCE56"],
    }]
  },
  options: {
    onClick: evt => {
      var elements = pieChart.getElementsAtEventForMode(evt, 'index', { intersect: true }, false);
      var index = elements[0].index;
      console.log(pieChart.data.labels[index] + ': ' + pieChart.data.datasets[0].data[index]);
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<canvas id="myChart"></canvas>

Leave a comment