I have created a pie chart using ChartJS.
Now I want to create a click handler in which I can get the label and value of the part of the chart that I have created. How do I achieve that?
let my_chart = new Chart('tot_pop_chart', {
type: 'pie',
data: {
labels: ['NSW', 'VIC', 'QSD', 'SA', 'WA', 'TAS', 'NT', 'ACT'],
datasets: [{
data: [1, 2, 3, 4, 5, 6, 7, 8],
backgroundColor: ['rgba(63, 75, 59, 1)', 'rgba(242, 246, 208, 1)', 'rgba(197, 123, 87, 1)', 'rgba(118, 159, 182, 1)', 'rgba(58, 110, 165, 1)', 'rgba(88, 12, 31, 1)', 'rgba(157, 172, 255, 1)', 'rgba(122, 48, 108, 1)']
}
]
},
options: {
animation: {},
plugins: {
legend: {
display: true,
position: 'bottom'
}
},
onClick: ... //see below
}
}
);
My current attempt is below:
onClick:
e => {
console.log("In click", e.chart);
// find the index of the clicked item
let canvasPosition = Chart.helpers.getRelativePosition(e, e.chart);
let index = e.chart.scales.x.getValueForPixel(canvasPosition.x);
// now I want to retrieve the label/data using the index, how to?
}
However, the error occurs as TypeError: Cannot read property 'getValueForPixel' of undefined. Also, how do I retrieve the label/data using the index in the onClick function?
Thanks a lot for your help!
The pie/doughnut charts don't use a scale so you can't use getValueForPixel. Instead you can just listen to the second argument which contains an array with all the active elements which for the default interaction mode only contains 1 item:
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: (e, activeEls) => {
let datasetIndex = activeEls[0].datasetIndex;
let dataIndex = activeEls[0].index;
let datasetLabel = e.chart.data.datasets[datasetIndex].label;
let value = e.chart.data.datasets[datasetIndex].data[dataIndex];
let label = e.chart.data.labels[dataIndex];
console.log("In click", datasetLabel, label, value);
}
}
}
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>