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: {
                size: '90%',
                startAngle: -90,
                endAngle: 90,
                background: {
                    innerRadius: "70%",
                    outerRadius: "100%",
		    shape: 'arc',
                    borderWidth: 2,
                    borderColor: '#8D8D8D',
                    backgroundColor: {
                        radialGradient: {
                            cx: 0.5, 
                            cy: 0.7, 
                            r: 0.9
                        },
                        stops: [
                            [ 0.3, '#CCC' ],
                            [ 0.6, '#E8E8E8' ]
                        ]
                    },
                }
            },

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

            plotOptions: {
		solidgauge: {
		    innerRadius: '71%'
		}
	    },

            series: [{
                data: [100],
         ...