I'm trying to use Highcharts new solidgauge plugin.
/
source code as provided by highchart
The gauge accepts three STEP parameters to show different color based on the Data. The problem is that it displays color in gradient and I wanted
1) Green color upto say 20%
2) yellow upto 80% and
3) once value crosses 80% gauge color should be Red.
Is it possible?
I'm trying to use Highcharts new solidgauge plugin.
http://jsfiddle/4zVU8/2/
source code as provided by highchart
The gauge accepts three STEP parameters to show different color based on the Data. The problem is that it displays color in gradient and I wanted
1) Green color upto say 20%
2) yellow upto 80% and
3) once value crosses 80% gauge color should be Red.
Is it possible?
Share Improve this question edited May 2, 2014 at 4:45 Gopal Joshi 2,35824 silver badges49 bronze badges asked May 1, 2014 at 15:38 siddhant Kumarsiddhant Kumar 4218 silver badges20 bronze badges 4- Are you updating the value dynamically? Why not just set the color in the options based on your value? – Mark Commented May 1, 2014 at 19:39
- the values are dynamic and so as the stop colours. However user may want to see red colour only when value crosses 90% and not maroon colour when value approaches 70% in gradient. – siddhant Kumar Commented May 2, 2014 at 8:41
- You mean that animation form color A to B is gradient? Because it seems to be solid after animation. – Sebastian Bochan Commented May 2, 2014 at 10:01
- what I was looking for is that colour stays green from 0 to 20 aftward is yellow upto 80 and red afterwards. However, in reality it changes from dark green to light green, yellow, gold, maroon and then red. – siddhant Kumar Commented May 2, 2014 at 13:50
3 Answers
Reset to default 9You can set stops, like this: http://jsfiddle/4zVU8/5/
stops: [
[0.0, '#55BF3B'], // green
[0.2, '#55BF3B'], // green
[0.21, '#DDDF0D'], // yellow
[0.80, '#DDDF0D'], // yellow
[0.81, '#DF5353'], // red
[1, '#DF5353'] // red
]
So aright after color ends set new color.
To get a solid color, set the minColor and maxColor options to the same value. To set the color based on a value, just pare in the options:
var guageValue = 60;
var gaugeOptions = {
...
yAxis: {
minColor: guageValue >= 80 ? '#FF0000' : (guageValue >= 60 ? '#FFFF00' : '#00FF00'),
maxColor: guageValue >= 80 ? '#FF0000' : (guageValue >= 60 ? '#FFFF00' : '#00FF00'),
lineWidth: 0,
....
EDITS FOR COMMENT
Well, doing it dynamically according to the API should be as easy as:
var chart = Highcharts.charts[0];
var point = chart.series[0].points[0];
var color = newGuageValue >= 80 ? '#FF0000' : (newGuageValue >= 60 ? '#FFFF00' : '#00FF00');
chart.yAxis[0].update({minColor:color, maxColor:color});
point.update(newGuageValue);
But, this breaks the chart (and I believe it to be a bug in the library).
So the best I can e up with is to go after the internals directly:
var chart = Highcharts.charts[0];
var point = chart.series[0].points[0];
var color = newGuageValue >= 80 ? [255,0,0,1] : (newGuageValue >= 60 ? [255,255,0,1] : [0,255,0,1]);
chart.yAxis[0].stops[0].color.rgba = color;
chart.yAxis[0].stops[1].color.rgba = color;
point.update(newGuageValue);
Here's a fiddle demo.
// change your stops ,0 and 1 set the same value
var showNumber = 100; // your random data
var tickMaxNumber = 1000; // The yAxis max value
if(showNumber <= tickMaxNumber*0.2){
gaugeOptions.yAxis[0].stops = [ // red
[0, '#EE4B4B'],
[1, '#EE4B4B']
];
}else if(showNumber <= tickMaxNumber*0.8){
gaugeOptions.yAxis[0].stops = [ // yellow
[0, '#FFC063'],
[1, '#FFC063']
];
}else{
gaugeOptions.yAxis[0].stops = [ // green
[0, '#40A276'],
[1, '#40A276']
];
}
$('#container-speed').highcharts(gaugeOptions);