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',
                type: 'gauge',
                alignTicks: false,
                events: {
                    redraw: function() {
                       this.ledBox && this.ledBox.destroy();

                       // 2nd pane center
                       var pane = this.panes[1].center; 
                       this.ledBox = this.renderer.rect(pane[0]-50, pane[1], 120, 80, 3).attr({
                           fill: 'rgba(229,137,100, 0.1)',
                           zIndex: 0 
                       }).add();
                    }
                }
            },
            title: {
                text: 'Fiat 500 Speedometer'
            },
            pane: [{
                startAngle: -120,
                endAngle: 120,
                size: 300,
                backgroundColor: '#E4E3DF'
            }],
            yAxis: [{
                min: 0,
                max: 140,
                labels: {
                   rotation: 'auto'
                }
            }],
            tooltip: { enabled: false },
            credits: {
               enabled: false 
            },
            series: [{
                name: 'Speed',
                data: [ 0 ],
            }]
        });
    });