Highcharts Demo

author(s): Torstein Hønsi

by Danielle Parkinson

HTML

<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/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {

    chart: {
      type: 'gauge',
      plotBackgroundColor: null,
      plotBackgroundImage: null,
      plotBorderWidth: 0,
      plotShadow: false,
      spacing: [0, 0, 0, 0],
      height: null
    },

    pivot: {
      backgroundColor: '#fff',
      radius: 4
    },

    dial: {
      backgroundColor: '#666',
      baseLength: '0%',
      baseWidth: 8,
      borderColor: '#666',
      borderWidth: 0,
      radius: '90%',
      rearLength: '0%',
      topWidth: 1
    },

    title: {
      text: ' '
    },

    pane: {
      center: ['50%', '50%'],
      startAngle: -110,
      endAngle: 110,
      background: [{
        backgroundColor: null,
        borderWidth: 0,
        outerRadius: '109%'
      }, {
        backgroundColor: null,
        borderWidth: 0,
        outerRadius: '105%',
        innerRadius: '103%'
      }]
    },

    // the value axis
    yAxis: {
      min: 0,
      max: 100,
      lineWidth: 1,
      minorTickWidth: 0,
      tickWidth: 0,
      tickPositions: [0, 50, 70, 100],
      labels: false,

      plotBands: [{
        innerRadius: '80%',
        outerRadius: '100%',
        from: 0,
        to: 100,
        color: '#e53b49' // red
      }, {
        innerRadius: '80%',
        outerRadius: '100%',
        from: 50,
        to: 70,
        color: '#ffb502' // amber
      }, {
        innerRadius: '80%',
        outerRadius: '100%',
        from: 70,
        to: 100,
        color: '#217b00' // green
      }]
    },

    series: [{
      name: 'Speed',
      data: [58],
      tooltip: {
        valueSuffix: ' km/h'
      }
    }]

  },
  // Add some life
  function(chart) {

  });