JSFiddle - React, Tailwind, and code Playground

by javiros

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="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>

JavaScript

$(function () {
	
    $('#container').highcharts({
	
	    chart: {
	        type: 'gauge',
	        plotBackgroundColor: null,
	        plotBackgroundImage: null,
	        plotBorderWidth: 0,
	        plotShadow: false
	    },
	    
	    title: {
	        text: 'Speedometer'
	    },
	    
	    pane: {
	        startAngle: -90,
	        endAngle: 90,
            background: null
	    },
        
        plotOptions: {
            gauge: {
                dataLabels: {
                    enabled: false
             },
                dial: {
                    baseLength: '0%',
                    baseWidth: 10,
                    radius: '100%',
                    rearLength: '0%',
                    topWidth: 1
                }
            }
        },
	       
	    // the value axis
	    yAxis: {
            labels: {
                enabled: true,
                x: 35, y: -10
            },
            tickPositions: [80, 90],
            minorTickLength: 0,
	        min: 0,
	        max: 100,
	        plotBands: [{
	            from: 0,
	            to: 25,
	            color: 'rgb(192, 0, 0)', // red
                thickness: '50%'
	        }, {
	            from: 25,
	            to: 75,
	            color: 'rgb(255, 192, 0)', // yellow
                thickness: '50%'
	        }, {
	            from: 75,
	            to: 100,
	            color: 'rgb(155, 187, 89)', // green
                thickness: '50%'
	        }]        
	    },
	
	    series: [{
	        name: 'Speed',
	        data: [80]
	    }]
	
	});
});