JSFiddle - React, Tailwind, and code Playground

by pradeep

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>

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

JavaScript

$(function () {

    $('#container').highcharts({

        chart: {
            type: 'gauge',
            plotBackgroundColor: null,
            plotBackgroundImage: null,
            plotBorderWidth: 0,
            plotShadow: false
        },

        title: {
            text: 'Speedometer'
        },

        pane: {
            startAngle: -90,
            endAngle: 90,
            size: '90%',
            background: [{
            	backgroundColor: '#fff',
              borderWidth: 0
                // default background
            }]
        },

        // the value axis
        yAxis: {
            min: 0,
                max: 100,
                tickPosition: 'inside',
                tickColor: '#666',
                tickLength: 10,
                tickWidth: 0,
                minorTickWidth: 3,
                minorTickColor: '#fff',
                minorTickPosition: 'inside',
                minorTickLength: 0,
                minorTickInterval: null,
                offset: -10,
                lineWidth: 0,
                labels: {
                    enabled: false
                },
                endOnTick: false,
            plotBands: [{
                from: 0,
                to: 20,
                thickness: 30,
                color: '#55BF3B' // green
            }, {
                from: 20,
                to: 60,
                thickness: 30,
                color: '#DDDF0D' // yellow
            }, {
                from: 60,
                to: 100,
                thickness: 30,
                color: '#DF5353' // red
            }]
        },

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

    },
    // Add some life
    function (chart) {
        if (!chart.renderer.forExport) {
            setInterval(function () {
                var point = chart.series[0].points[0],
                    newVal,
              ...