JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://bernii.github.com/gauge.js/dist/gauge.js"></script>
<canvas id="foo"></canvas>

<button id="btn">Click me to update value</button>

JavaScript

var opts = {
      lines: 12, // The number of lines to draw
      angle: 0, // The length of each line
      lineWidth: 0.15, // The line thickness
      pointer: {
        length: 0.9, // The radius of the inner circle
        strokeWidth: 0.042, // The rotation offset
        color: '#000000' // Fill color
      },
      colorStart: '#6b6b6b',   // Colors
      colorStop: '#E0E0E0',    // just experiment with them
      strokeColor: '#EEEEEE',   // to see which ones work best for you
      generateGradient: true
    };
    var target = document.getElementById('foo'); // your canvas element
    var gauge = new Donut(target).setOptions(opts); // create sexy gauge!
    gauge.maxValue = 3000; // set max gauge value
    gauge.animationSpeed = 32; // set animation speed (32 is default value)
    gauge.set(700); // set actual value

document.getElementById('btn').addEventListener('click', function(){
    gauge.set(3200);
});