JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://bernii.github.com/gauge.js/dist/gauge.min.js"></script>
<html>
<head>
    <title>Gauge JS simple use scenario</title>
</head>
<body>
    <div id="gauge">
        <canvas id="gauge-canvas"></canvas>
        <div id="gauge-text"></div>
    </div>
</body>
</html>

CSS

#gauge{
    width: 300px;
    text-align: center;
}
#gauge-text{
    font-size: 2em;
    font-weight: bold;
}

JavaScript

var opts = {
  angle: -0.5, // The span of the gauge arc
  lineWidth: 0.1, // The line thickness
  radiusScale: 1, // Relative radius
  pointer: {
    length: 0.6, // // Relative to gauge radius
    strokeWidth: 0.035, // The thickness
    color: '#000000' // Fill color
  },
  limitMax: false,     
  limitMin: false,     
 percentColors: [[0.0, "#90ed7d"], [0.50, "#eca55f"], [1.0, "#f35353"]],
	generateGradient: true,
  highDpiSupport: true,     // High resolution support
  
};
var target = document.getElementById('gauge-canvas'); // your canvas element
var gauge = new Donut(target).setOptions(opts); // create sexy gauge!
gauge.maxValue = 100; // set max gauge value
gauge.setMinValue(0);  // Prefer setter over gauge.minValue = 0
gauge.animationSpeed = 32; // set animation speed (32 is default value)
gauge.set(100); // set actual value

gauge.setTextField(document.getElementById("gauge-text"));

// randomly change value
/*var randomize = function(){
  gauge.set(Math.floor(Math.random() * (100 - 1))); 
};
setTimeout(function(){ setInterval(randomize, 500); }, 1000);*/