Highcharts multiple pie chart series hover

Question

I'm using Highcharts to create two pie charts with the same keys but different data in each chart. My options object look like this:

const chartOptions = {
  chart: {
    type: 'pie'
  },
  legend: {
    enabled: false
  },
  tooltip: {
    enabled: true,
  },
  plotOptions: {
    pie: {
      borderWidth: 0,
      cursor: 'pointer'
    },
    series: {
      states: {
        hover: {
          enabled: true
        }
      }
    }
  },
  series: [
    {
      name: 'Chart One',
      colorByPoint: true,
      size: '50%',
      center: ['25%', '50%'],
      data: [
        {color: '#000000', name: 'One', y: 43},
        {color: '#666666', name: 'Two', y: 12},
        {color: '#cccccc', name: 'Three', y: 54},
      ]
    },
    {
      name: 'Chart Two',
      colorByPoint: true,
      size: '50%',
      center: ['75%', '50%'],
      data: [
        {color: '#000000', name: 'One', y: 32},
        {color: '#666666', name: 'Two', y: 78},
        {color: '#cccccc', name: 'Three', y: 11},
      ]
    }
  ]
};

This works almost as expected. But I cannot get one thing working.

On a column chart, when you have multiple series and hover over a point in series A, the corresponding points in the other series will also light up (the other points will dim down). But not in a pie chart. When I hover "Three in "Chart One", "Three" in "Chart Two" is not highlighted.

Is it possible to do this somehow?

ppotaczek ppotaczek · Accepted Answer · 2020-06-17T19:15:43

In the mouseOver callback function you can find the related point and call setState('hover') on it:

    plotOptions: {
        ...,
        series: {
            point: {
                events: {
                    mouseOver: function() {
                        var relatedPoints = [],
                            series = this.series,
                            pIndex = this.index;

                        series.chart.series.forEach(function(s) {
                            if (s !== series) {
                                relatedPoints.push(s.points[pIndex]);
                            }
                        });

                        relatedPoints.forEach(function(p) {
                            p.setState('hover');
                        });
                    }
                }
            }
        }
    }

Live demo: http://jsfiddle.net/BlackLabel/xm7gc5u6/

API Reference: https://api.highcharts.com/class-reference/Highcharts.Point#setState

Highcharts multiple pie chart series hover

1 Answers