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 
                        },
        ...