JSFiddle - React, Tailwind, and code Playground

by berni

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);