Activity gauge High Chart with Range option

Question

I have used activity gauge from the HighChart. I want activity gauge chart with the range option in data. See the below example:

Suppose my yAxis have a min and max value 0 to 100.

 yAxis: {
          min: 0,
          max: 100
}

I want series data in a range option like below

series: [{
          data: [{
            y: [0,48]
          },{
            y: [90,100]
         }
        }]

I want same like below image

I also want custom tool tip like below image

score 2 · Accepted Answer · edited May 23 '17 at 10:34

2

Similar topic was here: Activity gauge High Chart with Gradient

As an addition to this topic, you can use different panes that will start and end in different positions:

pane: [{
  startAngle: 0,
  endAngle: 360,
  background: [{ // Track for Move
    outerRadius: '112%',
    innerRadius: '88%',
    backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.3).get(),
    borderWidth: 0
  }]
}, {
  startAngle: 360,
  endAngle: 0,
  background: [{ // Track for Move
    outerRadius: '72%',
    innerRadius: '48%',
    backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.3).get(),
    borderWidth: 0
  }]
}],

Here you can see an example how it can work: http://jsfiddle.net/5ajoegb9/4/

edited May 23 '17 at 10:34

Community

1
1

answered Sep 27 '16 at 09:16

Grzegorz Blachliński

5,132
10
13

Thank you, You saved my day! :) – Rav's Patel Sep 27 '16 at 10:09
Hi @Grzegorz Blachliński Thanks for your effort. Please help me one more time. I also want custom tool tip like image added in the question. I have already spent lots of time on Chart so I really appreciate your help. – Rav's Patel Sep 27 '16 at 10:40
I think in your case you should draw custom label using renderer.label and renderer.path: http://api.highcharts.com/highcharts/Renderer.path – Grzegorz Blachliński Sep 27 '16 at 11:23
Yes, I have tried with the renderer.path but It's not displaying any line on the chart. I think it's conflict with the redraw. If i comment redraw code than line is appearing on the chart. – Rav's Patel Sep 27 '16 at 12:12
Hi @Grzegorz Blachliński, Can we add animation on this customized chart? – Rav's Patel Sep 28 '16 at 06:45
Unfortunately, I don't think it is simple way of adding animation to this kind of chart, because it is only workaround for adding gradients. – Grzegorz Blachliński Sep 28 '16 at 09:08

Activity gauge High Chart with Range option

1 Answers1