JSFiddle - React, Tailwind, and code Playground

by Brad Patton

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/solid-gauge.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 () {
var bandValue = 65;
var dialValue = 85;
var bandColor = 'red';
    $('#container').highcharts({
		height: 270,
		width: 400,
		title: {
			text: null
		},
		credits: {
			enabled: false
		},
		plotOptions: {
			series: {
				dataLabels: {
					enabled: false
				}
			}
		},
		pane: {
			startAngle: -90,
			endAngle: 90,
			background: {
				backgroundColor: '#ccc',
				borderWidth: 0,
				shape: 'arc',
				innerRadius: '40%',
				outerRadius: '95%'
			}
		},
		yAxis: {
			stops: [
				[1, bandColor] // red
			],
			min: 0,
			max: 100,
      tickLength: 0,
			minorTickLength: 0,
			lineWidth: 0,
			tickColor: 'black',
			tickPositions: [bandValue, dialValue],
			labels: {
				distance: 10,
			style: {
						fontSize: '14px',
            fontWeight: 'bold'
					}
			},	       
      plotBands: [{
      	from: 0,
	      to: bandValue,
	      color: bandColor,
				innerRadius: '40%',
				outerRadius: '95%'
	    }]  
		},
		series: [{
			type: 'gauge',
			data: [dialValue],
			pivot: {
				radius: 0
			},
			dial: {
				radius: '85%',
				backgroundColor: 'black',
				borderWidth: 0,
				baseWidth: 7,
				topWidth: 2,
				baseLength: '20%', // how long until base tapers to top width
				rearLength: '0%'
			}
		}]

    },
                               
    // Add some life
    function (chart) {
        if (!chart.renderer.forExport) {
            setInterval(function () {
                var point = chart.series[0].points[0],
                    point2 = chart.series[1].points[0],
                    newVal,
                    inc = Math.round((Math.random() - 0.5) * 20);

                newVal = point.y + inc;
                if (newVal < 0 || newVal > 95) {
                    newVal = point.y - inc;
                }

                point.update(newVal, false);
                point2.update(newVal + 0.5);

            }, 30800);
        }
    });
});