I've recently upgraded my site from vue 2 to vue 3 and as part of that I had to upgrade the versions of vue-chartjs and chartjs too.
Now after I change the legend text of my pie chart using the generateLabels
option (shown below), the strikethrough after clicking on a legend to hide the segment no longer works.
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.data[i].hidden,
index: i,
};
});
}
return [];
},
padding: 30,
usePointStyle: true,
},
position: 'left',
},
}
How do I get the strikethrough again? I tried adding the onclick from this answer to the legend, but that just killed the pie chart completely.
By the looks of things - it's because the meta no longer has the hidden property in meta.data[i].hidden
as it is now just undefined
It looks like you can tell if a segment is hidden now by looking at the chart
object using the _hiddenIndices
property:
hidden: chart._hiddenIndices[i] === true,
Alternate way using getDataVisibility
per yoduh's comment:
hidden: !chart.getDataVisibility(i),