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!
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!
Share Improve this question edited Dec 1, 2021 at 20:04 isherwood 61.1k16 gold badges120 silver badges168 bronze badges asked Sep 7, 2021 at 19:48 Yige SongYige Song 3731 gold badge7 silver badges19 bronze badges 1- Here is an example an Doughnut chart with a percentage tooltip (Chart.js 4.4.0) link. It works fine ! hope it helps :) – Amine Soumiaa Commented Oct 4, 2023 at 13:58
1 Answer
Reset to default 19The 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>