Highcharts Demo

author(s): Torstein Hønsi

by Shawn Wood

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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/solid-gauge.js"></script>

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

JavaScript

// Uncomment to style it like Apple Watch

if (!Highcharts.theme) {
  Highcharts.setOptions({
    chart: {
      backgroundColor: 'white'
    },
    colors: ['#000000', '#FF0000', '#00FF00', '#0000FF', '#FF00FF'],
    title: {
      style: {
        color: 'navy'
      }
    },
    tooltip: {
      style: {
        color: 'navy'
      }
    }
  });
}
// 

Highcharts.chart('container', {

    chart: {
      type: 'solidgauge',
      marginTop: 50
    },

    title: {
      text: 'Aircraft Available',
      style: {
        fontSize: '24px'
      }
    },

    tooltip: {
      borderWidth: 0,
      backgroundColor: 'none',
      shadow: false,
      style: {
        fontSize: '16px'
      },
      pointFormat: '{series.name}<br /><div style="text-align: right; width:78px;"><span style="font-size:2em; color: {point.color}; font-weight: bold;">{point.y}</span></div>',
      positioner: function(labelWidth) {
        console.log(labelWidth)
        return {
          x: 200 - labelWidth / 2,
          y: 180
        };
      }
    },

    pane: {
      startAngle: 0,
      endAngle: 360,
      background: [{ // Track for 800 NM
        outerRadius: '115%',
        innerRadius: '100%',
        backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.3).get(),
        borderWidth: 0
      }, { // Track for 600 NM
        outerRadius: '99%',
        innerRadius: '84%',
        backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[1]).setOpacity(0.3).get(),
        borderWidth: 0
      }, { // Track for 550 NM
        outerRadius: '83%',
        innerRadius: '68%',
        backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[2]).setOpacity(0.3).get(),
        borderWidth: 0
      }, { // Track for 400 NM
        outerRadius: '67%',
        innerRadius: '52%',
        backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[3]).setOpacity(0.3).get(),
        borderWidth: 0
      }, { // Track for 200 NM
       ...