Show tooltip in highchart progress bars

Question

I have created a solid gauge chart using highcharts. It contains multiple circular progress bars where each circle denotes each value.

I used the below code to create the series with different colors.

 series: [{
  name: "Total",
  showInLegend: true,
  data: [{
    color: Highcharts.getOptions().colors[0],
    radius: "115%",
    innerRadius: "110%",
    y: 78,
    dataLabels: {
      format: "{y}%",
      borderWidth: 0,
      style: {
        fontSize: "15px"
      }
    }
  }]
},
{
  name: 'Amount',
  showInLegend: true,
  data: [{
    color: Highcharts.getOptions().colors[2],
    radius: "105%",
    innerRadius: "100%",
    y: 25,
    dataLabels: {
      format: "{y}%",
      borderWidth: 0,
      style: {
        fontSize: "15px"
      }
    }
  }]
}]

and background as grey to show the percentage graph properly

 background: [{
    backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || "#EEE",
    outerRadius: "115%",
    innerRadius: "110%",
    borderWidth: 0
  },
  {
    outerRadius: "105%",
    innerRadius: "100%",
    borderWidth: 0
  }
]

Currently, the code was working fine and once I hover the progress bar it will show its progress percentage. But I need to show the same progress value if I hover the grey(background pane) area also. ie. Now it is only showing the area where it is covered. But I have to display that particular percentage anywhere I hover that circle. Even if the percentage is 0 I need to display the series name:0% in the tooltip.

Here is the full code and below is the sample of graph created.

score 1 · Accepted Answer · answered Apr 03 '23 at 16:19

The pane.background is not a series or a point, that is why the tooltip is not showing.

You can achieve showing tooltip when pane mouseover, in more hacky way:

  chart: {
    type: 'solidgauge',
    events: {
      load() {
        let chart = this,
          panes = chart.pane[0].background,
          points = [chart.series[0].points[0], chart.series[1].points[0]];

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

          panes[i].element.onmouseout = function() {
            chart.tooltip.hide();
          }
        }
      }
    }
  },

Demo: https://jsfiddle.net/BlackLabel/x40sd5ep/

API Reference: https://api.highcharts.com/class-reference/Highcharts.Tooltip.html#refresh

Show tooltip in highchart progress bars

1 Answers1