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>
	<body>
  <div>
    <div id="container"></div>
  </div>
	</body>

JavaScript

$(document).ready(function() {
    document.title = "Highcharts " + Highcharts.version;

    var chart;
    var speedColor = '#474337';
    var rpmColor = '#BBB59C';
    var kmhArr = [ 0, 20, 40, 60, 90, 120, 150, 180, 210 ];
    var hiRef = '#A41E09';
    var dialColor = '#FA3421';
    var currentRpm = 0;

        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                alignTicks: false
            },
            title: {
                text: 'Fiat 500 Speedometer'
            },
            pane: [{
                startAngle: -120,
                endAngle: 120,
                size: 300,
                background: [{
                    backgroundColor: { 
                       radialGradient: {
		    			            cx: 0.5,
		    			            cy: 0.6,
		    			            r: 1.0 
		    		            },
	                     stops: [
	                         [0.3, '#A7A9A4'],
	                         [0.45, '#DDD'],
	                         [0.7, '#EBEDEA'],
	                     ]
                    },
                    innerRadius: '72%',
                    outerRadius: '105%'
                 }, {
                    // BG color in between speed and rpm
                    backgroundColor: '#38392F',
                    outerRadius: '72%',
                    innerRadius: '67%'
                 }, {
                    // BG color for rpm
                    backgroundColor: '#1A1815',
                    outerRadius: '68%',
                    innerRadius: '48%'
                 }, {
                    // Below rpm bg color
                    // backgroundColor: '#909090',
                    zIndex: 1,
                    backgroundColor: { 
                       radialGradient: {
		    			            cx: 0.5,
		    			            cy: 0.55,
		    			            r: 0.5 
		    		            },
	                     stops: [
                           [0.6, '#48443B' ],
	                     ...