Highcharts solid gauge, show colors of previous st

Question

I need to create a highcharts solid gauge but I need to have the colors of the identified 'stops" to remain visible as it animates/transitions into the additional stops.

So, let's say that the chart represents 0% to 100% on the other end, and the first 30% is green (good), then the next 30% is orange (warning) and the remaining 40% is red (bad). If the results of the gauge is under 30% then it will show the green color, then if it is over 30% but under 60% (let's say 50%) it will show the green for the first 30% then orange for the remaining 20%, then the default gray for the remaining arc, then if the result is at 75% it will show the green for the first 30%, orange for the next 30%, then red for the remaining 15%, then the remaining unused is the default gray... and so on.

It will animate just like the default solid gauge, but instead of changing the entire gauge to a single color when it changes the stops, it will still show the previous stops.

Is this possible? I created a simple animated gif image to show what I am talking about.

Answer 1

It seems that Highcharts doesn't support that kind of point coloring for solidgauge series.

As a workaround you can create multiple (properly colored) points and use them to initialize the series' data and mimic that kind of look.

Live working example: http://jsfiddle.net/kkulig/rm0p5113/

getPointColor function returns the color of the point based on it's value:

var ranges = [3, 7, 10];

(...)

function getPointColor(val) {
  if (val > ranges[1]) {
    return 'red';
  } else if (val > ranges[0]) {
    return 'orange';
  } else {
    return 'green';
  }
}

computePoints creates data array (points must be in descending order)

function computePoints(val) {
  var data = [];

  ranges.forEach(function(range) {
    if (val > range) {
      data.unshift({
        y: range,
        color: getPointColor(range)
      });
    }
  });

  data.unshift({
    y: val,
    color: getPointColor(val)
  });

  return data;
}

Series options are created like this:

  series: [{
    data: computePoints(9)
  }]

Please notice that these functions are very simplified. They serve only for demonstration purposes.