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,
					style: {
						fontSize: '25px'
					}
				}
			}
		},
		pane: {
			startAngle: -90,
			endAngle: 90,
			background: {
				backgroundColor: '#ccc',
				borderWidth: 0,
				shape: 'arc',
				innerRadius: '60%',
				outerRadius: '95%'
			}
		},
		yAxis: {
			stops: [
				[1, bandColor] // red
			],
			min: 0,
			max: 100,
			minorTickLength: 0,
			lineWidth: 0,
			tickColor: '#666',
			tickPositions: [bandValue, dialValue],
			labels: {
				distance: 10
			}
		},
		series: [{
			type: 'gauge',
			data: [dialValue],
			pivot: {
				radius: 0
			},
			dial: {
				radius: '85%',
				backgroundColor: 'black',
				borderWidth: 0,
				baseWidth: 6,
				topWidth: 1,
				baseLength: '10%', // how long until base tapers to top width
				rearLength: '0%'
			}
		}, {
			type: 'solidgauge',
			fillColor: bandColor,
			data: [bandValue],
			radius: '95%'
		}]

    },
                               
    // 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);
        }
    });
});