To get a solid color, set the minColor
and maxColor
options to the same value. To set the color based on a value, just compare 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 come 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.