JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.wijmo.com/themes/rocket/jquery-wijmo.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.0.0b2.min.css">
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.2.0.0b2.min.js"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.0.0b2.min.js"></script>
<div id="gauge"></div>
JavaScript
$("#gauge").wijradialgauge({
value: 60,
max: 120,
startAngle: -33,
sweepAngle: 240,
width: 400,
height: 400,
ranges: [{
startWidth: 25,
endWidth: 25,
startValue: 80,
endValue: 90,
startDistance: 0.84,
endDistance: 0.84,
style: {
fill: "#FFFF00",
stroke: "#FFFF00",
"stroke-width": "0"
}},
{
startWidth: 25,
endWidth: 25,
startValue: 90,
endValue: 100,
startDistance: 0.84,
endDistance: 0.84,
style: {
fill: "#FF0000",
stroke: "#FF0000",
"stroke-width": "0"
}},
{
startWidth: 1,
endWidth: 25,
startValue: 65,
endValue: 80,
startDistance: 0.98,
endDistance: 0.84,
style: {
fill: "#008000",
stroke: "#008000",
"stroke-width": "0"
}}]
});
window.setTimeout(function() {
$("#gauge").wijradialgauge("option", "value", 78);},3000);