Solid Gauge with background color

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'

  },

  title: {
    text: '',

  },
  tooltip: {
    enabled: false
  },

  pane: {
    startAngle: 0,
    endAngle: 360,
    background: [{ // Track for Move
      outerRadius: '100%',
      innerRadius: '70%',
      backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0])
        .setOpacity(0.3)
        .get(),
      borderWidth: 0
    }]
  },

  yAxis: {
    min: 0,
    max: 100,
    lineWidth: 0,
    tickPositions: []
  },

  plotOptions: {
    solidgauge: {
      stickyTracking: false,
      rounded: true

    }
  },

  series: [{
    name: 'Product',
    color: Highcharts.getOptions().colors[0],
    radius: '100%',
    innerRadius: '70%',
    dataLabels: {
      enabled: true,
      borderWidth: 0,
      format: '{y} %',
      verticalAlign: 'middle',
      style: {
        "fontSize": "30px",
        "fontWeight": "bold"
      },
      zIndex: 0
    },
    data: [80]

  }]
});