JSFiddle - React, Tailwind, and code Playground

by Torstein Hønsi

HTML

<script src="http://code.highcharts.local/highcharts.js"></script>
<script src="http://code.highcharts.local/highcharts-more.js"></script>

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

JavaScript

$(function () {

    $('#container').highcharts({

        chart: {
            type: 'gauge'
        },

        title: {
            text: 'Speedometer'
        },

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

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

        series: [{
            name: 'Speed',
            data: [60],
            tooltip: {
                valueSuffix: ' km/h'
            }
        }, {
        	name: 'Marker',
            data: [80],
            dial: {
            	baseLength: '100%',
                radius: '100%',
                rearLength: '-90%'
            },
            animation: false
        }]

    },
    // Add some life
    function (chart) {
        if (!chart.renderer.forExport) {
            setInterval(function () {
                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);
        }
    });
});