JSFiddle - React, Tailwind, and code Playground

by gorillawit

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/no-data-to-display.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="width: 600px; height: 300px; margin: 0 auto"></div>

JavaScript

$(function () {
 //////////////////////////////////////////////////////
    // Change the Nameplatevalue  for different scenarios
    var namePlateValue = 1000 ;  
    
 //////////////////////////////////////////////////////
    
    setInterval(function(){ 
         var CurrenrGen=[];
        if(namePlateValue <= 0){
            namePlateValue = 0;
            CurrenrGen = []; 
        }else if(isNaN(namePlateValue)){
            namePlateValue = 0;
            CurrenrGen = [];
        }else if(namePlateValue % 2 == 0){
            namePlateValue = namePlateValue;
            CurrenrGen = [Math.floor((Math.random() * namePlateValue))];
        }else{
            namePlateValue =namePlateValue + 1;
            CurrenrGen = [Math.floor((Math.random() * namePlateValue))];
        }
        
        $('#container').highcharts({
           
            chart: {
                type: 'gauge',
                height: 300
            },
            noData: {
                position: { "x": 5, "y": 50, "align": "center"}
            },
    
            title: {
                text: 'Meter Chart'
            },
    
            pane: {
                startAngle: -90,
                endAngle: 90,
                center: ['50%', '80%'],
                size: 200,
                background: {
                    backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
                    innerRadius: '80%',
                    outerRadius: '100%',
                    shape: 'arc'
                }
            },
            
            yAxis: [{
                min: 0,
                max: namePlateValue,
                minorTickInterval: null,
                tickPosition: 'outside',
                
                labels: {
                  //rotation: 'auto',
                  distance: 20,
                  format: '{value} kW',
                  align: 'center',
                    y: -2
                },
                plotBands: [{
   ...