Get Value for point clicked on Pie Chart in Chart.js 3

Question

I am making a pie chart with Chart.js 3 and want to call a function when someone clicks on a slice of the pie. Of course, I'd like to identify which data point was clicked and use that in the function. I can't seem to find a good explanation in the docs of how to do it in Chart.js V3. I have searched here and see many solutions for V1 and V2, but not V3. Any help would be greatly appreciated.

chart = new Chart(thecomplexeschart, {
        type: 'pie',
        data: {
            labels: Object.keys(dataset),
            datasets: [{
                label: label,
                data: Object.values(dataset),
                hoverOffset: 4,
                backgroundColor: makeRandomColorsString(Object.keys(dataset).length),
            }]
        },
        options: {
            onClick: (e) => {
                const canvasPosition = Chart.helpers.getRelativePosition(e, chart);
            },
            interaction: {
                mode: 'index'
            },
            responsive: false,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                },
                title: {
                    font: {
                        size: 20,
                        weight: 'bolder'
                    },
                    display: true,
                    text: label,
                    padding: {
                        top: 10,
                        bottom: 30
                    }
                }
            }
        }
    }
    );

Does this answer your question? [Click events on Pie Charts in Chart.js](https://stackoverflow.com/questions/26257268/click-events-on-pie-charts-in-chart-js) — Christopher, Aug 22 '21 at 23:35

score 2 · Answer 1 · answered Aug 22 '21 at 23:50

The click event does get next to the event also a list of all the active elements and the chart, so you can use the list of active elements to get your datapoint or you can use the getElementsAtEventForMode:

var options = {
  type: 'pie',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
    }]
  },
  options: {
    onClick: (evt, el, chart) => {
      console.log('Active el list: ', chart.data.datasets[el[0].datasetIndex].label, chart.data.datasets[el[0].datasetIndex].data[el[0].index])

      let point = chart.getElementsAtEventForMode(evt, 'point', {
        intersect: true
      }, true);

      console.log('Mode point list: ', chart.data.datasets[point[0].datasetIndex].label, chart.data.datasets[point[0].datasetIndex].data[point[0].index])
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
</body>

This looks right. I found the getElementsAtEventForMode function just as you posted this answer. Thank you so much! I have the code working now. Whoever suggested that this was already answered didn't bother to read that the question was for Chart.js 3+. — John Johnson, Aug 23 '21 at 00:43

Get Value for point clicked on Pie Chart in Chart.js 3

1 Answers1