JSFiddle - React, Tailwind, and code Playground

by Brad Patton

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/solid-gauge.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({
 
        title: {
            text: null
        },
        tooltip: {
            enabled: false
        },
            plotOptions: {
        series: {
            dataLabels: {
                enabled: false
            }
        }
    },
        pane: {
            startAngle: -90,
            endAngle: 90,
            background: {
                backgroundColor: '#ccc',
                borderWidth: 0,
                shape: 'arc',
                innerRadius: '60%',
                outerRadius: '95%'
            }
        },
        yAxis: {
            stops: [
                [1, '#f00'] // red
                ],
            min: 0,
            max: 100,
            minorTickLength: 0,
            lineWidth: 0,
            tickColor: '#666',
            tickPositions: [70, 85],
            labels: {
                distance: 10
            }
        },
        series: [{
            type: 'gauge',
            data: [85],
            pivot: {
                radius: 0
            },
            dataLabels: {
                enabled: false,
                align: 'end',
                inside: true
            },
            dial: {
                radius: '85%',
                backgroundColor: 'black',
                borderWidth: 0,
                baseWidth: 6,
                topWidth: 1,
                baseLength: '10%', // of radius
                rearLength: '0%'
            }
        }, {
            type: 'solidgauge',
            fillColor: 'red',
            data: [70],
            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 =...