score:3

Accepted answer

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.

score:0

// 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);

score:9

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.


Related Query

More Query from same tag