Categories
JavaScript Answers

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

Spread the love

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.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.