Highcharts Demo

author(s): Torstein Hønsi

by Rajesh Danabal

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/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {

    chart: {
        type: 'gauge',
        animation: false
    },

    title: {
        text: ''
    },

    pane: {
        startAngle: -90,
        endAngle: 90,
        background: null
    },

    // the value axis
    yAxis: {
        min: 0,
        max: 200,

        minorTickInterval: 'auto',
        minorTickWidth: 0,
        minorTickLength: 10,
        minorTickPosition: 'inside',
        minorTickColor: '#666',

        tickPixelInterval: 30,
        tickWidth: 0,
        tickPosition: 'inside',
        tickLength: 10,
        tickColor: '#666',
        labels: {
        	
            enabled: false,
            step: 2,
            rotation: 'auto'
        },
        title: {
            text: ''
        },
        plotBands: [{
            from: 0,
            to: 120,
            color: '#F4F4F4' // green
        }, {
            from: 120,
            to: 160,
            color: '#E1E2E3' // yellow
        }, {
            from: 160,
            to: 200,
            color: '#D0D2D3' // red
        }]
    },

    series: [{
                    "dial": {
                        "backgroundColor": "#929497",
                        "radius": "100%"
                    },
                    pivot:{
                        "backgroundColor": "#929497",
},
        animation: false,
        name: 'Speed',
        data: [80],
      dataLabels: {
        enabled: false
      },
    }]

});