Highcharts Demo

author(s): Torstein Hønsi

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

JavaScript

Highcharts.chart('container', {

    chart: {
        type: 'solidgauge',
        marginTop: 50
    },

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

    pane: {
        startAngle: -90,
        endAngle: 90,
        background: [{ // Track for National
            outerRadius: '110%',
            innerRadius: '100%',
            shape: "arc",
            backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[1])
                .setOpacity(0.1)
                .get(),
            borderWidth: 0
        }]
    },

    yAxis: {
        min: 0,
        max: 100,
        lineWidth: 0,
        tickPositions: []
    },

    plotOptions: {
        solidgauge: {
            dataLabels: {
                enabled: false
            }
        }
    },

    series: [{
        name: 'National',
        data: [{
            color: Highcharts.getOptions().colors[0],
            radius: '110%',
            innerRadius: '100%',
            y: 5
        }]
    }]
});