Solid gauge with plotbands

author(s): Torstein Hønsi

by kzoon

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 id="container"></div>

CSS

#container {
  margin: 0 auto;
  max-width: 400px;
  min-width: 380px;
}

JavaScript

Highcharts.chart('container', {

  chart: {
    type: 'solidgauge',
    height: '110%',

  },

  title: {
    text: '',

  },
  tooltip: {
    enabled: false
  },

  pane: {
    startAngle: 0,
    endAngle: 360,
    background: []
  },

  yAxis: {
    min: 0,
    max: 100,
    lineWidth: 0,
    //zIndex: 100,
    tickPositions: [],
    plotBands: [{
      from: 0,
      to: 45,
      outerRadius: '102%',
      innerRadius: '68%',
       color: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.1).get()

      
    }, {
      from: 45,
      to: 70,
      outerRadius: '102%',
      innerRadius: '68%',
      color: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.20).get()
    }, {
      from: 70,
      to: 100,
      outerRadius: '102%',
      innerRadius: '68%',
      color: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.30).get()

    }],
  },

  plotOptions: {
    solidgauge: {
      dataLabels: {
        enabled: false
      },
      linecap: 'round',
      stickyTracking: false,
      rounded: true
    }
  },

  series: [{
    name: 'Move',
    dataLabels: {
      enabled: true,
      borderWidth: 0,
      //format: 'My Series Name <br/> {y} m/ph',
      format: '{y} m/ph',
      style: {
        "fontSize": "20px",
        "fontWeight": "bold"
      },
      zIndex: 0
    },
    data: [{
      color: Highcharts.getOptions().colors[0],
      radius: '100%',
      innerRadius: '70%',
      y: 30
    }]

  }]
});