How to listen for click events on pie charts in Chart.js with JavaScript?

Sometimes, we want to listen for click events on pie charts in Chart.js with JavaScript.

In this article, we’ll look at how to listen for click events on pie charts in Chart.js with JavaScript.

How to listen for click events on pie charts in Chart.js with JavaScript?

To listen for click events on pie charts in Chart.js with JavaScript, we can add a onClick method into the chart object.

For instance, we write

<canvas id="myChart" width="200" height="200"></canvas>

to add a canvas.

Then we write

const ctx = document.getElementById("myChart").getContext("2d");
const myChart = new Chart(ctx, {
  type: "bar",
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [
      {
        label: "# of Votes",
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
          "rgba(255, 99, 132, 0.2)",
          "rgba(54, 162, 235, 0.2)",
          "rgba(255, 206, 86, 0.2)",
          "rgba(75, 192, 192, 0.2)",
          "rgba(153, 102, 255, 0.2)",
          "rgba(255, 159, 64, 0.2)",
        ],
        borderColor: [
          "rgba(255,99,132,1)",
          "rgba(54, 162, 235, 1)",
          "rgba(255, 206, 86, 1)",
          "rgba(75, 192, 192, 1)",
          "rgba(153, 102, 255, 1)",
          "rgba(255, 159, 64, 1)",
        ],
        borderWidth: 1,
      },
    ],
  },
  options: {
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: true,
          },
        },
      ],
    },
    onClick(e) {
      const activePoints = myChart.getElementsAtEvent(e);
      const selectedIndex = activePoints[0]._index;
      console.log(this.data.datasets[0].data[selectedIndex]);
    },
  },
});

to create a chart with the Chart constructor.

We call it with the ctx canvas context and the an object with the onClick method.

In it, we get the points with myChart.getElementsAtEvent.

Then we get the index of the clicked point with activePoints[0]._index.

Then we use this.data.datasets[0].data[selectedIndex]) to get the data for the point.

Conclusion

To listen for click events on pie charts in Chart.js with JavaScript, we can add a onClick method into the chart object.