JSFiddle - React, Tailwind, and code Playground

by Sushil Mahajan

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="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: -150,
            endAngle: 150
           
        },

        // the value axis
        yAxis: {
            min: 0,
            max: 100,

            minorTickInterval: 0,
            minorTickWidth: 1,
            minorTickLength: 1,
            minorTickPosition: 'outside',
            

           
           
            tickColor: 'black',
            labels: {
                step: 20,
                
            },
            title: {
                text: 'km/h'
            },
            plotBands: [{
                from: 0,
                to: 50,
                color: 'black' 
            },{
                from: 50,
                to: 100,
                color: 'green' 
            }
            ]
        },

        series: [{
            name: 'Risk',
            data: [80]
           
        }]

    }
        );
});