JSFiddle - React, Tailwind, and code Playground

by shivkumarganesh

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" class="guage"></div>

CSS

.gauge {
    min-width: 310px;
    max-width: 400px;
    height: 300px;
    margin: 0 auto
}

JavaScript

$(function () {

    var pointer=100;
    $('#container').highcharts({

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

        title: {
            text: 'Resistance to Ground'
        },

        pane: {
            startAngle: -90,
            endAngle: 90,
            background: null
        },
        plotOptions: {
            gauge: {
                dataLabels: {
                    enabled: true
                },
                dial: {
                    baseLength: '0%',
                    baseWidth: 10,
                    radius: '100%',
                    rearLength: '0%',
                    topWidth: 1
                }
            }
        },
        yAxis: {
            labels: {
                enabled: true,
                step: 2,
                rotation: 'auto',
                distance:10
            },

            tickPixelInterval: 30,
            tickWidth: 0,
            tickPosition: 'inside',
            tickColor: 'black',
            title: {
                text: 'Ω'
            },
            minorTickLength: 0,
            min: 0,
            max: 100,
            plotBands: [{
                from: 0,
                to: 25,
                color: 'rgb(192, 0, 0)', // red
                thickness: '20%'
            }, {
                from: 25,
                to: 75,
                color: 'rgb(255, 192, 0)', // yellow
                thickness: '20%'
            }, {
                from: 75,
                to: 100,
                color: 'rgb(155, 187, 89)', // green
                thickness: '20%'
            }]
        },

        series: [{
            name: 'Ohm',
            data: [pointer]
        }]

    }, function (chart) {
            if (!chart.renderer.forExport) {
                setInterval(function () {
                    var point =...