Highchart Guage with Gradient Fill

by Ben Clayton

HTML

<script src="//code.highcharts.com/highcharts.js"></script>
<script src="//code.highcharts.com/highcharts-more.js"></script>
<script src="//code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="width: 100%; height: 100%; margin: 0 auto"></div>

JavaScript

$(function() {

  var chart = new Highcharts.Chart({

    chart: {
      renderTo: 'container',
      type: 'gauge'
    },

    pane: {
      startAngle: -150,
      endAngle: 150
    },


    yAxis: {
      min: 0,
      max: 100,
      plotBands: [{
        color: {
          linearGradient: {
            x1: 0,
            y1: 1,
            x2: 0,
            y2: 0
          }, // up left
          stops: [
            [0, 'rgb(0, 255,0)'], // green
            [1, 'rgb(128, 255,0)'] //  green / yellow
          ]
        },
        from: 0,
        to: 25
      }, {
        color: {
          linearGradient: {
            x1: 0,
            y1: 0,
            x2: 1,
            y2: 0
          }, // up right
          stops: [
            [0, 'rgb(128, 255,0)'], // green / yellow
            [1, 'rgb(255,255,0)'] // yellow
          ]
        },
        from: 25,
        to: 50
      }, {
        color: {
          linearGradient: {
            x1: 0,
            y1: 0,
            x2: 0,
            y2: 1
          },
          stops: [
            [0, 'rgb(255, 255,0)'], // yellow 
            [1, 'rgb(255,128,0)'] // yellow / red
          ]
        },
        from: 50,
        to: 75
      }, {
        color: {
          linearGradient: {
            x1: 1,
            y1: 0,
            x2: 0,
            y2: 0
          },
          stops: [
            [0, 'rgb(255, 128,0)'], // yellow / red
            [1, 'rgb(255,0,0)'] // red
          ]
        },
        from: 75,
        to: 100
      }],
    },


    plotOptions: {
      gauge: {
        dial: {
          radius: '100%',
          backgroundColor: 'silver',
          borderColor: 'black',
          borderWidth: 1,
          baseWidth: 10,
          topWidth: 1,
          baseLength: '80%', // of radius
          rearLength: '20%'
        }
      }
    },


    series: [{
      data: [75]
    }]

  });
});