vue chartjs no strikethrough on legend click

Question

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',
  },
}

Example Stackblitz

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

Click Stackblitz

Answer 1

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,

Working blitz

Alternate way using getDataVisibility per yoduh's comment:

hidden: !chart.getDataVisibility(i),

Working blitz