JSFiddle - React, Tailwind, and code Playground

by Nayana Das

HTML

<script src="https://unpkg.com/gauge-chart@latest/dist/bundle.js"></script>
<div id="gaugeArea"></div>

JavaScript

// Element inside which you want to see the chart
let element = document.querySelector('#gaugeArea')

// Properties of the gauge
let options2 = {
      hasNeedle: true,
	    needleColor: 'black',
      arcColors: ['rgb(61, 204, 91)', 'rgb(239, 214, 19)', 'rgb(255, 84, 84)'],
      arcDelimiters: [30, 70],
      rangeLabel: ['100','500'],
      arcLabels: ['200', '300', '400']
    }

// Drawing and updating the chart
GaugeChart.gaugeChart(element, 300, options2).updateNeedle(300)