Highchart Guage with Gradient Fill

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>


<svg width="130" height="140" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
      
      <!-- y axis is top to bottom -->
      <!-- 0,0  red   to    1,1  blue -->
     
     <linearGradient id="GradientX1" x1="0" y1="1" x2="1" y2="0">
        <stop offset="0%" stop-color="#00FF00"/>
        <stop offset="50%" stop-color="#0000FF"/>
        <stop offset="100%" stop-color="#FF0000"/>
      </linearGradient>
      
  </defs>
 
   <rect x="20" y="20" rx="0" ry="0" width="100" height="100" fill="url(#GradientX1)"/>

  
</svg>
<svg width="130" height="140" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
      
      <!-- y axis is top to bottom -->
      <!-- 0,0  red   to    1,1  blue -->
     
     <radialGradient id="GradientX2" x1="0" y1="1" x2="1" y2="0">
        <stop offset="0%" stop-color="#00FF00"/>
        <stop offset="50%" stop-color="#0000FF"/>
        <stop offset="100%" stop-color="#FF0000"/>
      </radialGradient>
      
  </defs>
 
   <rect x="20" y="20" rx="0" ry="0" width="100" height="100" fill="url(#GradientX2)"/>

  
</svg>


<table style="margin:0 auto">
<tr><td>

<svg width="130" height="140" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
      
      <!-- y axis is top to bottom -->
      <!-- 0,0  red   to    1,1  blue -->
     
     <linearGradient id="Gradient2" x1="0" y1="1" x2="1" y2="0">
        <stop offset="0%" stop-color="#C0FF00"/>
        <stop offset="100%" stop-color="#FFFF00"/>
      </linearGradient>
      
  </defs>
 
 <text x="100" y="12" width="100" height="100" >1,0</text>
   <rect x="20" y="20" rx="0" ry="0" width="100" height="100" fill="url(#Gradient2)"/>
 <text x="20" y="135" width="100" height="100" >0,1</text>

  
</svg>

</td><td>

<svg width="130" height="140" version="1.1"...

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(196, 255,0)'] //  green / yellow
          ]
        },
        from: 0,
        to: 25
      }, {
        color: {
          linearGradient: {
            x1: 0,
            y1: 0,
            x2: 1,
            y2: 0
          }, // up right
          stops: [
            [0, 'rgb(196, 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,196,0)'] // yellow / red
          ]
        },
        from: 50,
        to: 75
      }, {
        color: {
          linearGradient: {
            x1: 1,
            y1: 0,
            x2: 0,
            y2: 0
          },
          stops: [
            [0, 'rgb(255, 196,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]
    }]

  });
});