Highcharts - How do I add a strikethrough effect on legend item?

Question

I'm utilizing Highcharts in my code. Currently, when a user clicks on a legend item (for example, "ABC"), the corresponding pie labeled "ABC" changes to a gray color. Upon clicking again, the gray color is removed and the pie reverts to its original color. Now, I wish to enhance this functionality by adding a strikethrough effect to the "ABC" legend item when the pie turns gray, and removing the strikethrough when the pie returns to its original color.

Highcharts.chart('container', {
  series: [{
    type: 'pie',
    data: [1, 2, 3, 4],
    showInLegend: true,
    point: {
      events: {
        legendItemClick: function() {
          var originalColor = this.options.originalColor; // Retrieve original color from options
          var newColor = (this.color === 'gray') ? originalColor : 'gray'; // Toggle between gray and original color
          
          // Toggle visibility of data labels
          var showDataLabels = (newColor !== 'gray');

          this.update({
            color: newColor,
            dataLabels: {
              enabled: showDataLabels
            }
          });
          
          return false;
        }
      }
    },
    events: {
      afterInit: function() {
        // Store original color for each point
        this.points.forEach(function(point) {
          point.options.originalColor = point.color;
        });
      }
    }
  }],
  accessibility: {
    enabled: false,
  },
});

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

Answer 1

You can use the legend labelFormatter to inject a styled HTML label when your gray colour is applied.

Highcharts.chart('container', {
  legend: {
    labelFormatter: function () {
      return this.color === 'gray'
        ? `<span style="text-decoration:line-through">${this.name}</span>`
        : this.name;
    },
  },
  series: [{
    type: 'pie',
    data: [1, 2, 3, 4],
    showInLegend: true,
    point: {
      events: {
        legendItemClick: function() {
          var originalColor = this.options.originalColor; // Retrieve original color from options
          var newColor = (this.color === 'gray') ? originalColor : 'gray'; // Toggle between gray and original color
          
          // Toggle visibility of data labels
          var showDataLabels = (newColor !== 'gray');

          this.update({
            color: newColor,
            dataLabels: {
              enabled: showDataLabels
            }
          });
          
          return false;
        }
      }
    },
    events: {
      afterInit: function() {
        // Store original color for each point
        this.points.forEach(function(point) {
          point.options.originalColor = point.color;
        });
      }
    }
  }],
  accessibility: {
    enabled: false,
  },
});

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>