var options = {
  chart: {
    renderTo: 'container',
    type: 'gauge',
    plotBackgroundColor: null,
    plotBackgroundImage: null,
    plotBorderWidth: 0,
    plotShadow: false
  },
  title: {
    text: 'Temperature'
  },
  pane: {
    startAngle: -150,
    endAngle: 150,
    background: [{
      backgroundColor: {
        linearGradient: {
          x1: 0,
          y1: 0,
          x2: 0,
          y2: 1
        },
        stops: [
        [0, '#FFF'],
        [1, '#333']
        ]
      },
      borderWidth: 0,
      outerRadius: '109%'
    },
    {
      backgroundColor: {
        linearGradient: {
          x1: 0,
          y1: 0,
          x2: 0,
          y2: 1
        },
        stops: [
        [0, '#333'],
        [1, '#FFF']
        ]
      },
      borderWidth: 1,
      outerRadius: '107%'
    },
    {
      // default background
    },
    {
      backgroundColor: '#DDD',
      borderWidth: 0,
      outerRadius: '105%',
      innerRadius: '103%'
    }
    ]
  },
  // the value axis
  yAxis: {
    min: -20,
    max: 40,
    minorTickInterval: 'auto',
    minorTickWidth: 1,
    minorTickLength: 10,
    minorTickPosition: 'inside',
    minorTickColor: '#666',
    tickInterval: 10,
    tickWidth: 2,
    tickPosition: 'inside',
    tickLength: 12,
    tickColor: '#666',
    labels: {
      step: 2,
      rotation: 'auto'
    },
    title: {
      text: '°C'
    },
    plotBands: [{
      from: -20,
      to: 0,
      color: '#9CCC65' // green
     },
     {
      from: 0,
      to: 10,
      color: '#FFEB3B' // yellow
     },
     {
      from: 10,
      to: 20,
      color: '#FFC107' // orange
     },
     {
      from: 20,
      to: 30,
      color: '#FF5722' // red
     },
     {
      from: 30,
      to: 40,
      color: '#F44336' // dark red
     }]
  },
  series: [{
    name: 'Temperature',
    data: [20],
    tooltip: {
      valueSuffix: ' °C'
     }
  }]
};
var chart = new Highcharts.Chart(options);