Programme summery

Kondal

by Kondal Durgam

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: 600px; height: 400px; margin: 0 auto"></div>

JavaScript

// The speed gauge
Highcharts.chart('container', {

  chart: {
    type: 'solidgauge'
  },

  credits: {
    enabled: false
  },

  title: {
    text: '',
    y: 210,
  },


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

  // the value axis
  yAxis: {

    lineWidth: 0,
    minorTickInterval: null,
    min: 0,
    max: 360,
    tickPixelInterval: 360,
    tickWidth: 0,
    labels: {
      enabled: false,
    },

  },

  series: [{
    name: 'Target',
    data: [{
      name: 'Target',
      radius: 88,
      innerRadius: 70,
      y: 180,
      color: 'black',
    }],
    dataLabels: {
      enabled: false
    },
  }, {
    name: 'Achieved',
    data: [{
      name: 'Achieved',
      radius: 84,
      innerRadius: 74,
      y: 100,
      color: '#1C90F3',
    }],
    dataLabels: {
      enabled: false
    }
  }]
});