CODEWITHSUNDEEP
javascripthtmlhighcharts
Santhosh
Santhosh

Reputation: 901

Issue with speedometer highcharts dynamically update guage range

I have a use case where I need to modify the Guage range dynamically, but when I do this my highcharts graph behaves weirdly and the range goes out of bounds. Please look at the image belowSpeedometer Highchart

This happens only after the 7th iteration (value is 0.007). You can find my code on jsfiddle at http://jsfiddle.net/S6LtL/

My Highcharts Speedometer Code (jsfiddle)

Can someone help me how to resolve this issue?

Upvotes: 0

Views: 492

Answers (1)

Mark
Mark

Reputation: 108567

On each iteration, you are adding a new plotBand, but not removing the old ones:

chart.yAxis[0].removePlotBand('red');
chart.yAxis[0].removePlotBand('green');                
chart.yAxis[0].addPlotBand({
    id: 'red',
    from: newVal - 0.005,
    to: newVal - 0.001,
    color: '#DF5353' // red
});
chart.yAxis[0].addPlotBand({
    id: 'green',
    from: newVal - 0.001,
    to: newVal + 0.005,
    color: '#55BF3B' //green
});

Updated fiddle.

Upvotes: 1

Related Questions