6

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?

Gopal Joshi
  • 2,350
  • 22
  • 49
siddhant Kumar
  • 411
  • 8
  • 20
  • Are you updating the value dynamically? Why not just set the color in the options based on your value? – Mark May 01 '14 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 May 02 '14 at 08:41
  • You mean that animation form color A to B is gradient? Because it seems to be solid after animation. – Sebastian Bochan May 02 '14 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 May 02 '14 at 13:50

3 Answers3

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.

Paweł Fus
  • 44,795
  • 3
  • 61
  • 77
  • Not sure how I missed this, much better solution then mine! – Mark May 06 '14 at 14:52
  • This is still giving a gradually changing gradient color, how can I change it to a categorized color theme – Anton Dec 28 '16 at 21:17
  • I am not sure what do you mean. Do you want to remove color change during the animation? This is default animation in Highcharts. You can wrap `series.drawPoints` to change how to animate it, but this will require some coding. Here is a simple example how to remove color-tweening: http://jsfiddle.net/4zVU8/64/ (color now is changed to the new color right after new value is set, before the animation). – Paweł Fus Dec 30 '16 at 11:45
  • Value 0.805 (161 km/h) is still orange though. – István Békési Sep 30 '20 at 12:26
  • Stops can be exactly the same: http://jsfiddle.net/BlackLabel/bwd29xos/ – Paweł Fus Sep 30 '20 at 13:50
3

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.

Mark
  • 106,305
  • 20
  • 172
  • 230
  • Although this works with static data I can't seems to make it work for dynamic data. I have setinterval which pull data every few sec/min and changing `chart.yAxis.maxColor = newVal >= 80 ? '#FF0000' : (newVal >= 60 ? '#FFFF00' : '#00FF00');` doesn't seems to work – siddhant Kumar May 02 '14 at 15:19
  • @siddhantKumar, see response below. Seems like it works and would be preferred to mine. – Mark May 06 '14 at 14:52
  • Its all subjective. I can't create arrays for each color range. so your solution fits my need. thanks once again. – siddhant Kumar May 07 '14 at 10:36
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);
natee
  • 55
  • 2
  • 8