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 customFillStyle = function(gauge){
    // define pairs: percentage val - color
    var colorStops = [[0, "#E62020"], [25, "#00FF00"], [50, "#9370DB"], [75, "#FFFACD"]];
    return function(gauge){
        // caluclate percentage of gauge fill
        var percentage = (gauge.displayedValue / gauge.maxValue) * 100;
        // iterate thorugh color stops
        for (var i = 0; i < colorStops.length; i++) {
            var minVal = colorStops[i][0];
            if(percentage > minVal){
                color = colorStops[i][1];
            }
        };
        return color;
    }
}
// set custom fill style with options!
var opts = {
    customFillStyle: customFillStyle()
}
var gauge = new Gauge(document.getElementById("gauge-canvas")).setOptions(opts);
gauge.setTextField(document.getElementById("gauge-text"));
gauge.maxValue = 3000;
gauge.set(2844);