How to define colorAxis dataClasses for solid gauge chart?

Question

I am trying to set solid gauge chart to use defined colors for ranges using colorAxis dataClasses, but it isn't working. Not sure what I am doing wrong.

How should I define the colorAxis and dataClasses?

Please see http://jsfiddle.net/edob/27oc38L1 UPDATE!!! I've amended fiddle to use stops, and it worked for colors defined as red, green and not for hexadecimal colors! Try values like 51, 65 and 81

 $(function() {

  Highcharts.chart('container-cpu', {

    chart: {
      type: 'solidgauge'
    },

    title: null,

    pane: {
      center: ['50%', '85%'],
      size: '140%',
      startAngle: -90,
      endAngle: 90,
      background: {
        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
        innerRadius: '60%',
        outerRadius: '100%',
        shape: 'arc'
      }
    },

    tooltip: {
      enabled: false
    },

    yAxis: {
      min: 0,
      max: 100,
      title: {
        text: 'CPU'
      }
    },

    colorAxis: {
      dataClasses: [{
        from: 0,
        to: 50,
        color: 'red'
      }, {
        from: 50,
        to: 90,
        color: 'green'
      }, {
        from: 90,
        color: 'yellow'

      }]
    },

    series: [{
      name: 'HDD',
      data: [70]

    }]

  });
});

I see default blue color for any value and I would expect to see green for value 70.

ewolden · Accepted Answer · 2019-01-10T12:08:41.460

To color the value of a solidgauge you should use stops, like this:

yAxis: {
  stops: [
    [0.5, 'red'], 
    [0.9, 'green'], 
    [1, 'yellow'] 
  ],
  min: 0,
  max: 100,
  title: {
    text: 'CPU'
  }
},

Solid gauge series only. Color stops for the solid gauge. Use this in cases where a linear gradient between a minColor and maxColor is not sufficient. The stops is an array of tuples, where the first item is a float between 0 and 1 assigning the relative position in the gradient, and the second item is the color.

Working JSFiddle example: http://jsfiddle.net/ewolden/c8qy4x5o/1/

API on stops: https://api.highcharts.com/highcharts/yAxis.stops

Since you said in a comment that you want to use solid colors, and not gradients; the following is one way you can implement that:

chart: {
  type: 'solidgauge',
  events: {
    load: function() {
      var currentValue = this.series[0].points[0].y;
      var newColor = '';
      console.log(currentValue)
        if(currentValue < 50) {
        newColor = 'red'
      } else if(currentValue < 90) {
        newColor = 'green'
      } else {
        newColor = 'yellow'
      }
      this.series[0].points[0].update({color: newColor}, true)
    }
  }
},

Working example: http://jsfiddle.net/ewolden/s9qrhtmb/

API on point.update: https://api.highcharts.com/class-reference/Highcharts.Point#update

I cannot use stops because I don't want to have gradients.I need solid color for all values from 0 to 50, then another solid color for values from 50 to 90, etc — Edo, Jan 10 '19 at 10:36
tnx for your help. Seems that solid color works only if you use color names like green, red etc and for hexadecimal color stops like #55BF3B it calculates color between 2 stops I've update fiddle http://jsfiddle.net/edob/27oc38L1/ There are both ways in this example, but one is commented. So for values 51 and 81 you get yellow for first case and for second case you get calculated color between 2 stops — Edo, Jan 10 '19 at 12:22

CodeMeNatalie · Answer 2 · 2019-01-10T10:58:43.013

Instead of colorAxis you need to add stops with proper values in yAxis. I believe this is what you are looking for working example. As I checked it's not creating gradients and colors are solid.

$(function() {

  Highcharts.chart('container-cpu', {

    chart: {
      type: 'solidgauge'
    },

    title: null,

    pane: {
      center: ['50%', '85%'],
      size: '140%',
      startAngle: -90,
      endAngle: 90,
      background: {
        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
        innerRadius: '60%',
        outerRadius: '100%',
        shape: 'arc'
      }
    },

    tooltip: {
      enabled: false
    },

    yAxis: {
      stops: [
        [0.5, '#DF5353'], // red
        [0.9, '#55BF3B'], // green
        [1, '#DDDF0D'] // yellow
      ],
      min: 0,
      max: 100,
      title: {
        text: 'CPU'
      }
    },

    series: [{
      name: 'HDD',
      data: [49]

    }]

  });
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>

<div id="container-cpu" class="chart-container"></div>

I still get calculated color. try values like 51 , 65 and 81 ..also i had to fix yours fiddle to make it work. Seems that solid color works only if you use color names like green, red etc and for hexadecimal color stops like #55BF3B it calculates color between 2 stops I've update fiddle http://jsfiddle.net/edob/27oc38L1/ There are both ways in this example, but one is commented. So for values 51 and 81 you get yellow for first case and for second case you get calculated color between 2 stops — Edo, Jan 10 '19 at 12:29

How to define colorAxis dataClasses for solid gauge chart?

2 Answers2