JSFiddle - React, Tailwind, and code Playground

by JoeKuan

HTML

<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
    <script type="text/javascript" src="http://code.highcharts.com/highcharts-more.js"></script>
    <script type="text/javascript" src="http://code.highcharts.com/modules/solid-gauge.js"></script>
	<body>
  <div>
    <div id="container"></div>
  </div>
	</body>

JavaScript

$(document).ready(function() {
	document.title = "Highcharts " + Highcharts.version;
	var chart;
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'solidgauge'
            },
            title: {
                text: 'Solid Gauge Speedometer'
            },
            pane: {
                center: [ '50%', '65%' ],
                size: '100%',
                startAngle: -90,
                endAngle: 90,
                background: [{
                    borderWidth: 2,
                    borderColor: '#8D8D8D',
                    backgroundColor: {
                        radialGradient: {
                            cx: 0.5, 
                            cy: 0.7, 
                            r: 0.9
                        },
                        stops: [
                            [ 0.3, '#CCC' ],
                            [ 0.6, '#E8E8E8' ]
                        ]
                    },
                    // innerRadius: 72,
                    //outerRadius: 124,
                    innerRadius: "70%",
                    outerRadius: "100%",
                    shape: 'arc'
                }]
            },

            // the value axis
            yAxis: {
		stops: [
		    [ 0, '#4673ac' ], // blue
                    [ 0.2, '#79c04f' ], // green
                    [ 0.4, '#ffcc00'], // yellow
                    [ 0.6, '#ff6600'], // orange
		    [ 0.8, '#ff5050' ],
		    [ 1.0, '#cc0000' ]
                ],
		lineWidth: 2,
		minorTickInterval: null,
		tickInterval: 10,
		tickWidth: 2,
		lineColor: '#8D8D8D',
		tickColor: '#8D8D8D',
		zIndex: 99,
		labels: {
                    y: 16,
                    step: 20
		},
		min: 0,
		max: 200,
		title: {
		    y: 20,
                    text: 'Speed',
		    style: {
			fontSize: '15px'
		    }
		}
            },

            plotOptions: {
		solidgauge: {
		    innerRadius: '71%',
                    dataLabels: {
			y:...