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>
    <button id="button">I'm a pesimist, update gauge!</button>
</body>
</html>

CSS

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

JavaScript

var CustomTextRenderer = function(el){
    this.el = el;
    this.render = function(gauge){
        this.el.innerHTML = gauge.displayedValue.toPrecision(3);
    }
}
// inherit TextRenderer through prototype chain
CustomTextRenderer.prototype = new TextRenderer();

var cs = new CustomTextRenderer(document.getElementById("gauge-text"));
var gauge = new Gauge(document.getElementById("gauge-canvas"));
// use custom text renderer
gauge.setTextField(new CustomTextRenderer(document.getElementById("gauge-text")))
// set max gauge value
gauge.maxValue = 2.98;
// set min gauge value with method
// it resets starting state of the gauge
gauge.setMinValue(-150);
gauge.set(1);


// simple button action (go to some crazy negative val)
document.getElementById("button").addEventListener("click", function(e){
    gauge.set(-120);
});