Highcharts Demo

author(s): Torstein Hønsi

by Tinh Nguyen Nhu

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="width: 370px; height: 370px; margin: 0 auto"></div>

JavaScript

$(function () {

    $('#container').highcharts({

        chart: {
            type: 'gauge'
        },

        pane: {
            background: [],
            startAngle: 0,
            endAngle: 360
        },
        plotOptions:{
            series:{
                pivot:{
                    radius:0
                },
                dial:{
                    backgroundColor: 'rgba(0,0,0,0)'
                },
                dataLabels:{
                    enabled:false
                }
            }
        },
        yAxis: {
            lineWidth:0,
            minorTickLength:0,
            tickLength:0,
            labels:{
                enabled:false
            },
            min: 0,
            max: 100,
            plotBands: [{
                from: 0,
                to: 55,
                color: '#993939',
                outerRadius: '100%',
                thickness: '14%'
            },{
                from: 0,
                to: 66,
                color: '#eb5244',
                outerRadius: '75%',
                thickness: '14%'
            }, {
                from: 0,
                to: 80,
                color: '#ff7f66',
                outerRadius: '50%',
                thickness: '14%'
            }, {
                from: 0,
                to: 100,
                color: '#ffc438',
                outerRadius: '25%',
                thickness: '25%'
            }]
        },

        series: [{
            // data: [80]
        }]
    });
});