Highcharts Demo

author(s): Torstein Hønsi

by Swapnil Navalakha

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: 'solidgauge'
  },

  pane: {
    center: ['50%', '85%'],
    size: '140%',
    startAngle: -90,
    endAngle: 90,
    background: {
      backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
      innerRadius: '60%',
      outerRadius: '100%',
      shape: 'arc'
    }
  }
};

// The speed gauge
var chartSpeed = Highcharts.chart('container-speed', Highcharts.merge(gaugeOptions, {
  yAxis: {
    min: 0,
    max: 200,
    labels: {
      distance: 15
    }
  },

  series: [{
    data: [275]
  }]

}));