Recently, I made the transition from vue 2 to vue 3 on my website and part of that process involved updating vue-chartjs and chartjs too.
However, after modifying the legend text of my pie chart using the generateLabels option (as seen below), the strikethrough feature stopped working when clicking on a legend to hide a segment.
plugins: {
legend: {
labels: {
generateLabels: chart => {
const data = chart.data;
if (data.labels.length && data.datasets.length) {
return data.labels.map((label, i) => {
const meta = chart.getDatasetMeta(0);
const style = meta.controller.getStyle(i);
return {
text: `${label}: ${this.isMoney ? StringHelper.FormatNumber(data.datasets[0].data[i], true) : data.datasets[0].data[i]}`,
fillStyle: style.backgroundColor,
strokeStyle: style.borderColor,
lineWidth: style.borderWidth,
hidden: isNaN(data.datasets[0].data[i]) || !meta.hidden,
index: i,
};
});
}
return [];
},
padding: 30,
usePointStyle: true,
},
position: 'left',
},
}
How can I restore the strikethrough functionality? I attempted to implement the onclick solution mentioned in this answer, but it ended up breaking the pie chart entirely.
It seems that the issue lies with the hidden property now being undefined in meta.data[i].hidden instead of available as before.