title: Gauge chart with steps of colors
body: <p><a href="https://i.stack.imgur.com/k7Nit.png" rel="nofollow"><img src="https://i.stack.imgur.com/k7Nit.png" alt="enter image description here"></a></p>
  
  <p>How can I achieve this using highcarts? tired using stops:[...] but it will not work as above image.</p>
  
  <pre><code>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: '&lt;div class="prc" style="text-align:center;"&gt;&lt;span style="font-weight:normal; font-family:Helvetica Neue, Helvetica, Arial; font-size:52px;' +
                  '#333' + '"&gt;{y}&lt;/span&gt;'
              }
          }]
  </code></pre>