JSFiddle - React, Tailwind, and code Playground

by Umair Rafiq

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="width: 400px; height: 300px; margin: 0 auto"></div>

JavaScript

$(function () {
	
    var chart = new Highcharts.Chart({
	
	    chart: {
	        renderTo: 'container',
	        type: 'gauge'
	    },
	    
	    pane: {
	    	startAngle: -90,
	    	endAngle: 90
	    },
	   
	    
		yAxis: {
			min: 0,
			max: 100,
            plotBands: [{ // mark the weekend
                color: {
                    linearGradient: [300, 300, 0, 0],
                    stops: [
                        [0, 'rgb(0, 255, 0)'],
                        [50, 'rgb(0, 0, 0)'],
                        [100, 'rgb(0, 0, 255)']
                    ]
                },
                from: 0,
                to: 100
            }],
		},
                                     
		
		plotOptions: {
			gauge: {
				dial: {
					radius: '100%',
					backgroundColor: 'silver',
					borderColor: 'black',
					borderWidth: 1,
					baseWidth: 10,
					topWidth: 1,
					baseLength: '90%', // of radius
					rearLength: '50%'
				}
			}
		},
					
		
	    series: [{
	        data: [80]
	    }]
	
	});
});