How to synchronize the Highchart Sunburst behavior

Question

As shown in the image, I want to show two sunbursts next to each other. I want to implement it with Highchart and react in such a way where,

If user mouse over on any data point on one sunburst, same data point should get highlighted on another chart, while other data points just goes into disabled mode or changes their color to white

Answer 1

In mouseOver event, by using references to the charts, you can programmatically set 'hover' state at the right point:

        point: {
          events: {
            mouseOver: function() {
              const chart1 = component.highchartsChart1.current.chart;
              const chart2 = component.highchartsChart2.current.chart;

              function clearState(chart) {
                Highcharts.each(chart.series[0].points, function(p) {
                  p.setState("");
                });
              }

              if (this.series.chart === chart1) {
                clearState(chart2);
                chart2.series[0].points[this.index].setState("hover");
              } else {
                clearState(chart1);
                chart1.series[0].points[this.index].setState("hover");
              }
            }
          }
        }

Live demo: https://codesandbox.io/s/nn54z2234m

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