Highcharts Demo

author(s): Torstein Hønsi

by Jens Kühn

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/solid-gauge.js"></script>

<div style="width: 600px; height: 400px; margin: 0 auto">
  <div id="container-speed" style="width: 300px; height: 200px; float: left"></div>
  <div id="container-rpm" style="width: 300px; height: 200px; float: left"></div>
</div>

CSS

.highcharts-yaxis-grid .highcharts-grid-line {
  display: none;
}

JavaScript

var gaugeOptions = {

  chart: {
    type: 'gauge',
    plotBackgroundColor: null,
    plotBackgroundImage: null,
    plotBorderWidth: 0,
    plotShadow: false
  },
  title: {
    text: ''
  },
  pane: {
    center: ['50%', '85%'],
    size: '140%',
    startAngle: -90,
    endAngle: 90,
    background: {
      backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
      innerRadius: '60%',
      outerRadius: '100%',
      shape: 'arc'
    }
  },
  plotOptions: {
        gauge: {
            dial: {
                baseWidth: 2,
                backgroundColor: '#000',
                borderColor: '#000',
                borderWidth: 0,
                rearLength: -50,
                baseLength: 90,
                radius: 100,
                topWidth: 15
            },
            pivot: {
                radius: 0,
                borderWidth: 0
            },
            dataLabels: {
                borderWidth: 0,
                padding: 5,
                verticalAlign: 'center',
                y: 30,
                style: {
                    fontWeight: 'bold'
                }
            },
            wrap: false
        }
        }
};

// The speed gauge
var chartSpeed = Highcharts.chart('container-speed', Highcharts.merge(gaugeOptions, {
  yAxis: {
    min: 0,
    max: 150,
    labels: {
      distance: 20,
      step: 1,
      formatter: function () {
        if (this.value === 25) {
        	return '0-49 %';
        }
        if (this.value === 75) {
        	return '50-99 %';
        }
        if (this.value === 125) {
        	return '100+ %';
        }
      	return '';
      },
      style: {
      	fontSize: '100%',
        fontWeight: 'bold'
      }
    },

    tickWidth: 0,
    tickColor: '#666',
    tickLength: 0,
    tickPixelInterval: 15,

    plotBands: [{
      from: 0,
      to: 49.999,
      color: '#55BF3B', // green
      thickness: '40%'
    }, {
      from: 50,
      to: 99,
      color: '#DDDF0D', //...