guage chart

author(s): Torstein Hønsi

by Swapnil Navalakha

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-speed" class="chart-container"></div>

CSS

#container-speed{
  width: 500px;
  height: 200px;
  border: 1px solid red;
}
.highcharts-container {
  border: 1px solid blue;
}
}

JavaScript

/* Color Range
	0-25 : rgb(221, 226, 227)
  25-50 : rgb(197, 213, 215)
  50-75: rgb(170, 202, 206)
  75-100: rgb(140, 194, 200)
*/
var gaugeOptions = {

   

   
 

  
  
};

// The speed gauge
var chartSpeed = Highcharts.chart('container-speed', Highcharts.merge(gaugeOptions, {
 chart: {
        type: 'gauge',
        width: 500,
  			height: 400,
        backgroundColor: '#368391',
    },
     title: null,
    tooltip:{
    enabled: false
    },
      plotOptions: {
        solidgauge: {
          innerRadius: '60%'
         
        }
    },
       pane: {
      size: '100%',
        startAngle: -90,
        endAngle: 90,
        background: {
            backgroundColor:'rgb(140, 194, 200)',
          innerRadius: '60%',
          outerRadius: '100%',
            shape: 'arc'
        }
    },

    yAxis: {
      lineWidth: 0,
        minorTickInterval: null,
        tickAmount: 5,
 
        labels: {
            y: 0,
            x:0,
             format: '{value}%',
             style:{
              'font-weight': 900
             }
        },
        min: 0,
        max: 100,
        title: null,
        tickWidth: 1,
        tickLength: 10,
        tickColor:'#00838f',
      
        stops: [
            [1, '#f2f2f2']
            ]
    },

    credits: {
        enabled: false
    },

    series: [{
        name: null,
        data: [200],
        lineWidth: 1,
        
        dataLabels: {
        	enabled: true,
           color: 'white',
            borderWidth: 0,
                style: {
                textOutline: 0,
                    textShadow: false 
                },
          y:-40,
          formatter: function(){
          var value = this.y;
          var message = ''
            if(value <= 25) {
        message = 'Poor'
      } else if(value <= 50) {
         message = 'Fair'
      } else if(value <= 75) {
        message = 'Good'
      } else if(value <= 100) {
        message = 'Best'
      }
          	return    `<div...