Javascript Question posted in
A very good W3school tutorial can be found here.

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

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>
Tags:

2

Answers


  1. 0

    Since Highcharts generates its charts as SVG, you cannot use normal CSS styles with them.

    The hackish walkaround is to use JS events and override styles after the Highcharts have applied them.

    Please let me know if this helps.

    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,
  },
});

const items = document.querySelector('svg').querySelectorAll('.highcharts-legend-item text');
items.forEach((item, index) => {
  item.addEventListener('mouseover', (ev) => {
    // HACK: this timeout is to override the style after highcharts applies its own style
    setTimeout(() => {
      ev.target.style.textDecoration = 'line-through';
    }, 100);
  });
  item.addEventListener('mouseout', (ev) => {
    ev.target.style.textDecoration = '';
  });
});
    <script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search