I have to extend the onClick implementation for Doughnut labels. The documentation says, that onClick for labels has following functionality by default:
function(e, legendItem, legend) {
const index = legendItem.datasetIndex;
const ci = legend.chart;
if (ci.isDatasetVisible(index)) {
ci.hide(index);
legendItem.hidden = true;
} else {
ci.show(index);
legendItem.hidden = false;
}
}
but when I trying copy-paste it to my project it doesn't work at all. I tried to put toggleDataVisibility to this example, but it doesn't help. It's strange, that legendItem doesn't have datasetIndex property.
So, what I need: save default functionality of onClick event and add my custom functionality to it. How can I do it?
This is my code:
<Doughnut
ref={chartRef}
options={{
responsive: true,
maintainAspectRatio: false,
layout: {
padding: {
bottom(ctx) {
return resizeChart(ctx);
},
left(ctx) {
return resizeChart(ctx);
},
right(ctx) {
return resizeChart(ctx);
},
},
},
plugins: {
tooltip: {
xAlign: 'center',
},
legend: {
position: 'top',
labels: {
color: cssvar('--textfield-standard'),
},
onClick: function (e, legendItem, legend) {
const { index } = legendItem;
const ci = legend.chart;
console.log(legendItem);
ci.toggleDataVisibility(index );
if (ci.getDataVisibility(index )) {
ci.hide(index );
legendItem.hidden = false;
} else {
ci.show(index );
legendItem.hidden = true;
}
},
},
},
}}
data={{
labels: [
`${translate(language, 'Free')}, ${hddData?.statistic?.unit_size}`,
`${translate(language, 'Used')}, ${hddData?.statistic?.unit_size}`,
`${translate(language, 'Logs')}, ${hddData?.statistic?.unit_size}`,
],
datasets: [
{
data: [hddData?.statistic?.free, hddData?.statistic?.used, hddData?.log_used],
backgroundColor: [
cssvar('--dashboard-doughuny-free'),
cssvar('--dashboard-doughuny-used'),
'red',
],
borderColor: ['rgba(67, 137, 137, 1)', 'rgba(249, 168, 37, 1)', 'green'],
borderWidth: 1,
hoverOffset: 15,
hoverBackgroundColor: [
cssvar('--dashboard-doughuny-used-hover'),
'orange',
cssvar('--dashboard-doughuny-free-hover'),
],
},
],
}}
/>