JSFiddle - React, Tailwind, and code Playground

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>

<div style="width: 600px; height: 600px; margin: 0 auto">
	<div id="my-chart" style="width: 600px; height: 600px; float: left"></div>
</div>

JavaScript

$(function () {

    var gaugeOptions = {

        'chart': {
            'type': 'solidgauge'
        },

        'title': null,

        'tooltip': {
            'enabled': false
        },
        
        'pane': {
          'center': ['50%', '50%'],
          'size': '500px',
          'startAngle': 0,
          'endAngle': 360,
          'background': {
            'backgroundColor': '#EEE',
            'innerRadius': '90%',
            'outerRadius': '100%',
            'borderWidth': 0
          }
        },

        'yAxis': {
          'min': 0,
          'max': 100,
          'labels': {
            'enabled': false
          },
    
          'lineWidth': 0,
          'minorTickInterval': null,
          'tickPixelInterval': 400,
          'tickWidth': 0
        },

        'plotOptions': {
            'solidgauge': {
                'innerRadius': '90%'
            }
        },
        
        'series': [{
            'name': 'Speed',
            'data': [80],
            'dataLabels': {
                'enabled': false
            }
        }]
    };

    $('#my-chart').highcharts(gaugeOptions);

});