Highcharts Demo

author(s): Torstein Hønsi

by AbhishekRohan

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;
  margin-top: 50px;
	max-width: 300px;
	min-width: 280px;
}

JavaScript

Highcharts.setOptions({
							colors : ["#f88b8c","#fcd0d1"]
						});
Highcharts.chart('container', {

    chart: {
        type: 'solidgauge',
        height: '110%',
         	events:{
      	load:function() {
        	var chart = this,
          	  series = chart.series,
              each = Highcharts.each,
              color;         
           
              each(series, function(serie, i) {
              	color = serie.data[0].color;
              
                serie.legendSymbol.attr({
                  'stroke': color,
                  'fill': color
                });
              });
        }
      }
    },

    title: {
        text: '',
        style: {
            fontSize: '24px'
        }
    },

    tooltip: {
    	enabled : false
    },

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

    yAxis: {
        min: 0,
        max: 100,
        lineWidth: 0,
        tickPositions: []
    },	
    credits: {
               enabled: false
    },	
    plotOptions: {
        solidgauge: {
            dataLabels: {
                enabled: false
            },
            linecap: 'round',
            stickyTracking: false,
            rounded: true,
       events: {
            click: function() { return false; },
            legendItemClick: function() { return false; }
      },  
        },
       		series: {
							animation :false,
              enableMouseTracking: false
						}, 
    },

    series: [{
        name: 'Target',
        data: [{
            color: "#fcd0d1",
            radius: '104%',
            innerRadius: '96%',
            y: 100
        }],
            showInLegend:true
    },{
        name: 'Achieved',
        data :[{
         ...