Highlighting SolidGauge Panes When Hovering Over Grey Portion of Percentage Graph

Question

I am using Highcharts Solid Gauge graphs in Angular 10 and 13 to display circular progress charts. In the provided chart code, I am attempting to implement a feature where a specific pane is highlighted. This would involve ensuring that when hovering over not only the colored portion but also the grey portion, the corresponding percentage pane should get highlighted. Currently, the behavior is such that when hovering over the colored portion, only that specific circle gets highlighted while the others are dimmed.

In my desired scenario, I would like to achieve the following: when hovering over either the colored or grey portion, the associated circle should be highlighted. This would involve modifying the hover behavior of the chart to ensure that both the colored and grey portions activate the highlight effect for their respective circles. What steps or modifications should I consider to achieve this functionality?

I have successfully implemented the tooltip functionality when hovering over the grey portion of the chart using the following code, and it is functioning as expected.

events: {
            load() {
              let chart = this,
                panes = chart.pane[0].background,
                points = [chart.series[0].points[0], chart.series[1].points[0], chart.series[2].points[0], chart.series[3].points[0], chart.series[4].points[0]];
              if (panes.length > 5) {
                const rtdPoints = [chart.series[5].points[0], chart.series[6].points[0]]
                points.push(...rtdPoints);
              }

              for (let i = 0; i < panes.length; i++) {
                panes[i].element.onmouseover = function () {
                  chart.tooltip.hide();
                  chart.tooltip.refresh(points[i]);
                  points[i].setState('hover');
              }

              panes[i].element.onmouseout = function () {
                  chart.tooltip.hide();
                  points[i].setState('');
              }
              }
              const renderer = chart.renderer;
              
            }
          }
        },

Answer 1

Unfortunately, the Highcharts API does not have the functionality to set the point highlighting on background hover, but using the chart.events.load() callback function, you can add logic that will add mouse events for these elements with the series.setState() and chart.tooltip.refresh() methods that are responsible for the highlight effect:

chart: {
  events: {
    load: function() {
      const chart = this;

      chart.pane[0].background.forEach((bg, i) => {
        bg.element.addEventListener('mouseover', () => {
          chart.series.forEach(series => {
            series.setState('inactive');
          });
          chart.series[i].setState('hover');
          chart.tooltip.refresh(chart.series[i].points[0]);
        });
        bg.element.addEventListener('mouseout', () => {
          chart.series.forEach(series => {
            series.setState('normal');
          });
          chart.tooltip.hide();
        });
      })
    }
  }
}

Demo: https://jsfiddle.net/BlackLabel/5zq69732/
API: https://api.highcharts.com/class-reference/Highcharts.Tooltip
https://api.highcharts.com/highcharts/chart.events.load