Rav's Patel Rav's Patel - 2 months ago 38
jQuery Question

Activity gauge High Chart with Range option

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
enter image description here

I also want custom tool tip like below image

enter image description here

Answer

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/

Comments