Highcharts solidgauge : How can I disable gradient fill?

Question

I\'m trying to use Highcharts new solidgauge plugin.

http://jsfiddle.net/4zVU8/2/

source code as provided by highchart

Answer 1

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.