Highcharts Demo

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/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',
        alignTicks: false,
        plotBackgroundColor: '#368391',
        plotBackgroundImage: null,
        plotBorderWidth: 0,
        plotShadow: false
    },

    title: {
        text: 'Speedometer with dual axes'
    },

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

    yAxis: [{
        min: 0,
        max: 100,
        lineColor: {
    linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
    stops: [
        [0, 'rgb(140, 194, 200)'], // start
        [0.5, '#ffffff'], // middle
        [1, '#3366AA'] // end
    ]
},
        tickColor: '#339',
        minorTickColor: '#339',
        offset: -25,
        lineWidth: 25,
        labels: {
            distance: -20,
            rotation: 'auto'
        },
        tickLength: 5,
        minorTickLength: 5,
        endOnTick: false
    }],

    series: [{
        name: 'Speed',
        data: [80],
        dataLabels: {
           enabled: false
        },
        tooltip: {
            valueSuffix: ' km/h'
        }
    }]

},
// Add some life
function (chart) {
    setInterval(function () {
        if (chart.axes) { // not destroyed
            var point = chart.series[0].points[0],
                newVal,
                inc = Math.round((Math.random() - 0.5) * 20);

            newVal = point.y + inc;
            if (newVal < 0 || newVal > 200) {
                newVal = point.y - inc;
            }

            point.update(newVal);
        }
    }, 3000);

});