JSFiddle - React, Tailwind, and code Playground

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; border: 1px solid black;"></div>

JavaScript

$(function () {
	
    $('#container').highcharts({
	
	    chart: {
	        type: 'gauge'
	    },
	    
	    pane: {
//	        center: ['50%', '100%'],
	        startAngle: -90,
	        endAngle: 90,
	        background: null
	    },
	       
	    // the value axis
	    yAxis: {
	        min: 0,
	        max: 4,
            tickLength: 0,
            categories: ['good', 'bad', 'ugly', 'one'],
            tickPositions: [0.5, 1.5, 2.5, 3.5],
	        labels: {
	            rotation: 'none',
                formatter: function() {
                    return this.axis.categories[this.value - 0.5];
                }
	        },
	        plotBands: [{
	            from: 0,
                outerRadius: '100%',
                innerRadius: '1%',
	            to: 1,
	            color: '#55BF3B' // green
	        }, {
	            from: 1,
	            to: 2,
                outerRadius: '100%',
                innerRadius: '1%',
	            color: '#DDDF0D' // yellow
	        }, {
	            from: 2,
	            to: 3,
                outerRadius: '100%',
                innerRadius: '1%',
	            color: '#DF5353' // red
	        }, {
	            from: 3,
	            to: 4,
                outerRadius: '100%',
                innerRadius: '1%',
	            color: 'rgba(0,0,255, 0.5)' // blue
	        }]        
	    },
	
	    series: [{
	        data: [1.5]
	    }]
	
	});
});