Gauge chart with steps of colors

Question

How can I achieve this using highcarts? tired using stops:[...] but it will not work as above image.

yAxis: {
            min: 0,
            max: 100
        },
        series: [{
            name: 'customers',
            data: [{
                color: {
//
                    linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0},
                    stops: [
                        [0.1, '#009a60'],
                        [0.2, '#4aa84e'],
                        [0.3, '#92b73a'],
                        [0.4, '#c6bf22'],
                        [0.5, '#edbd02'],
                        [0.6, '#ffad00'],
                        [0.7, '#ff8c00'],
                        [0.8, '#fc6114'],
                        [0.9, '#f43021'],
                        [1.0, '#ed0022']
                    ]
                },
                y:76
            }],
            dataLabels: {
                format: '<div class="prc" style="text-align:center;"><span style="font-weight:normal; font-family:Helvetica Neue, Helvetica, Arial; font-size:52px;' +
                '#333' + '">{y}</span>'
            }
        }]

Solution

One way of getting this char could be to use axis line and ticks to cover a chart to create white spaces. Next you could add more points and set stops with a color format that is not supported for a gradient - like hex color format with 3 digits ("#rgb").

Demo: http://jsfiddle.net/bsdtsmyb/

$(function() {

  var rawData = 94,
    data = getData(rawData);

  function getData(rawData) {
    var data = [],
      start = Math.round(Math.floor(rawData / 10) * 10);
    data.push(rawData);
    for (i = start; i > 0; i -= 10) {
      data.push({
        y: i
      });
    }
    return data;
  }

  Highcharts.chart('container', {
    chart: {
      type: 'solidgauge',
      marginTop: 10
    },
    
    title: {
      text: ''
    },
    
    subtitle: {
      text: rawData,
      style: {
        'font-size': '60px'
      },
      y: 200,
      zIndex: 7
    },

    tooltip: {
      enabled: false
    },

    pane: [{
      startAngle: -120,
      endAngle: 120,
      background: [{ // Track for Move
        outerRadius: '100%',
        innerRadius: '80%',
        backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.3).get(),
        borderWidth: 0,
        shape: 'arc'
      }],
      size: '120%',
      center: ['50%', '65%']
    }, {
      startAngle: -120,
      endAngle: 120,
      size: '95%',
      center: ['50%', '65%'],
      background: []
    }],

    yAxis: [{
      min: 0,
      max: 100,
      lineWidth: 2,
      lineColor: 'white',
      tickInterval: 10,
      labels: {
        enabled: false
      },
      minorTickWidth: 0,
      tickLength: 50,
      tickWidth: 5,
      tickColor: 'white',
      zIndex: 6,
      stops: [
        [0, '#fff'],
        [0.101, '#0f0'],
        [0.201, '#2d0'],
        [0.301, '#4b0'],
        [0.401, '#690'],
        [0.501, '#870'],
        [0.601, '#a50'],
        [0.701, '#c30'],
        [0.801, '#e10'],
        [0.901, '#f03'],
        [1, '#f06']
      ]
    }, {
      linkedTo: 0,
      pane: 1,
      lineWidth: 5,
      lineColor: 'white',
      tickPositions: [],
      zIndex: 6
    }],
    
    series: [{
      animation: false,
      dataLabels: {
        enabled: false
      },
      borderWidth: 0,
      color: Highcharts.getOptions().colors[0],
      radius: '100%',
      innerRadius: '80%',
      data: data
    }]
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<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" style="height: 300px;">
</div>

Comments

[Dince12]

i love it, i love it