JSFiddle - React, Tailwind, and code Playground

by Black Label

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>

<div id="container" style="width: 400px; height: 400px; margin: 0 auto">
</div>

CSS

.highcharts-series path {
  shape-rendering: crispEdges;
}

JavaScript

$(function() {

  Highcharts.chart('container', {

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

    pane: {
      startAngle: 0,
      endAngle: 360,
      background: [{ // Track for Move
        outerRadius: '112%',
        innerRadius: '88%',
        backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.3).get(),
        borderWidth: 0
      }]
    },

    yAxis: {
      min: 0,
      max: 100,
      lineWidth: 0,
      tickPositions: [],
      stops: [
        [0.1, '#ff0000'],
        [0.9, '#550010']
      ],
    },

    plotOptions: {
      solidgauge: {
        borderWidth: '34px',
        linecap: 'round',
        dataLabels: {
          enabled: false
        }
      }
    },

    series: [{
      data: [{
        borderColor: 'red',
        color: Highcharts.getOptions().colors[0],
        radius: '100%',
        innerRadius: '100%',
        y: 120
      }]
    }]
  }, function(chart) {
    var y = this.series[0].data[0].y,
      yAxis = this.series[0].yAxis;
    for (var i = y; i > yAxis.dataMax - yAxis.max; i = i - (y / 70)) {
      chart.addSeries({
        data: [{
          y: i,
          radius: '100%',
          innerRadius: '100%',
        }],
        stickyTracking: false,
        enableMouseTracking: false
      }, false)
    }
    chart.redraw();
    Highcharts.each(chart.series, function(s) {
      s.update({
        borderColor: s.data[0].color
      }, false);
    });
    chart.addSeries({
      data: [yAxis.dataMax - yAxis.max],
      color: yAxis.stops[1][1],
      borderColor: yAxis.stops[1][1],
      radius: '100%',
      innerRadius: '100%',
      enableMouseTracking: false
    });
    chart.redraw();
  });


});