JSFiddle - React, Tailwind, and code Playground

by Dipak1991

HTML

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

JavaScript

var opts = {
    lines: 12,
    angle: 0.15,
    lineWidth: 0.44,
    pointer: {
        length: 0.9,
        strokeWidth: 0.035,
        color: '#000000'
    },
    limitMax: 'false',
    percentColors: [
        [0.0, "#a9d70b"],
        [0.50, "#f9c802"],
        [1.0, "#ff0000"]
    ], // !!!!
    strokeColor: '#E0E0E0',
    generateGradient: true
};
var target = document.getElementById('foo');
var gauge = new Gauge(target).setOptions(opts);
gauge.maxValue = 3000;
gauge.animationSpeed = 32;
gauge.set(2250);