JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://bernii.github.com/gauge.js/dist/gauge.min.js"></script>
<h4>Sample gauge page</h4>
<div id="preview">
<canvas width=200 height=200 id="gaugeOne"></canvas>
<canvas width=250 height=200 id="gaugeTwo"></canvas>
</div>
<button id="clickme">Click me</button>

JavaScript

console.log("GAUGE ONE");

var gaugeOneTarget = document.getElementById('gaugeOne');
var gaugeOne = new Donut(gaugeOneTarget);
gaugeOne.maxValue = 100;
gaugeOne.set(85);

console.log("GAUGE TWO");
var gaugeTwoTarget = document.getElementById('gaugeTwo');
var gaugeTwo = new Gauge(gaugeTwoTarget);
gaugeTwo.maxValue = 100;
gaugeTwo.set(25);

document.getElementById('clickme').addEventListener('click', function(){
    // RESIZE GAUGE 1 (Donut)
    gaugeOneTarget.width = 100; gaugeOneTarget.height = 100; // change canvas size
    gaugeOne.setOptions(); // recalulate size etc.
    gaugeOne.set(22); // set new values dynamically
    gaugeOne.render();

    // RESIZE GAUGE2 (Gauge)
    gaugeTwoTarget.width = 125; gaugeTwoTarget.height = 100; // change canvas size
    gaugeTwo.setOptions(); // recalulate size etc.
    gaugeTwo.set(82); // set new values dynamically 
    gaugeTwo.render()
  
});