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

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?

Answer 1

You can set stops, like this: http://jsfiddle.net/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.

Answer 2

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.