JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css">
<script src="https://www.jqwidgets.com/jquery-widgets-demo/scripts/demos.js"></script>
<div id='jqxBarGauge'></div>

CSS

#jqxBarGauge {
  position: relative;
}

.center-label {
  position: absolute;
  font-size: 30px;
  top: 120px;
  left: 132px;
}

JavaScript

var values = [];
var barGaugePalette = ['#307DD7', '#AA4643', '#89A54E', '#71588F', '#4198AF'];

$('#jqxBarGauge').jqxBarGauge({
  width: 300,
  height: 300,
  values: [25],
  relativeInnerRadius: 0.8,
  formatFunction: function(value, index, color) {
    if (value < 20) {
      return barGaugePalette[0];
    }
    if (value < 40) {
      return barGaugePalette[1];
    }
    if (value < 60) {
      return barGaugePalette[2];
    }
    if (value < 80) {
      return barGaugePalette[3];
    }
    if (value <= 100) {
      return barGaugePalette[4];
    }
  }
});

var loop = 0;
$('#jqxBarGauge').on("drawEnd", function() {
  values[0] = getRandomInt(1, 99);
  setTimeout(function() {
    $('#jqxBarGauge').jqxBarGauge("val", values);
  }, 1000);
});

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}
//alert('Start Angle : ' +$('#jqxBarGauge').jqxBarGauge('startAngle') + '\n End Angle '+ $('#jqxBarGauge').jqxBarGauge('endAngle'));
var labels = $('#jqxBarGauge').jqxBarGauge('labels');
alert('Labels : ' + labels);

$('#jqxBarGauge').jqxBarGauge({
  startAngle: 180,
  endAngle: 0
});

$('#jqxBarGauge').on('valueChanged', function() {
  centerLabel.innerHTML = $('#jqxBarGauge').val()[0];
});

var centerLabel = document.createElement('div');
centerLabel.innerHTML = $('#jqxBarGauge').val()[0];
centerLabel.className = 'center-label';
$('#jqxBarGauge').append(centerLabel);