Activity gauge

author(s): Torstein Hønsi

by sectioni

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" style="width: 200px; height: 200px;"></div>

JavaScript

Highcharts.chart('container', {

  chart: {
    type: 'solidgauge',
    backgroundColor:"#303030"
  },

  credits: {
    // enabled: false
  },

  pane: {
    startAngle: 0,
    endAngle: 360,
    background: [{
      backgroundColor: Highcharts.Color('#404040')
        .setOpacity(1)
        .get(),
      borderWidth: 0
    }]
  },

  plotOptions: {
    solidgauge: {
      dataLabels: {
        enabled: true,
        borderWidth: 0,
        y: -29,
        style: {
          fontSize: '40px',
          textOutline: false,
          color: 'white'
        }
      },
      rounded: true
    }
  },

  title: {
    text: null
  },

  tooltip: {
    enabled: false
  },

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

  series: [{
    data: [{
      color: '#ffa500',
      radius: '104%',
      innerRadius: '93%',
      y: 67
    }]
  }]

});