JSFiddle - React, Tailwind, and code Playground

by Pawan Jadhav

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>

JavaScript

$(function () {

    $('#container').highcharts({

        "chart": {
            "inverted": false,
            "backgroundColor": "rgba(255,255,255,0)",
            "reflow": false,
            "height": 500,
            "width": 500,
            borderWidth:1,
            plotBackgroundColor: null,
            plotBackgroundImage: null,
            plotBorderWidth: 1,
            plotShadow: false
        },
        "plotOptions": {
            "gauge": {
                "animation": {
                    "duration": 700
                },
                "cursor": "pointer",
                "showInLegend": true,
                "turboThreshold": 0,
                "events": {}
            }
        },

        "pane": [{
            "startAngle": -150,
            "endAngle": 150,
            "size": "80%",
            "background": [{
                "backgroundColor": null,
                "borderWidth": 4
            }]
        }, {
            "startAngle": -150,
            "endAngle": 150,
            "size": "55%",
            "background": [{
                "backgroundColor": null,
                "borderWidth": 4
            }]
        }],
        "yAxis": [{
            "min": 0,
            "max": 54230,
            "tickPixelInterval": 30,
            "tickColor": "#666",
            "labels": {
                "enabled": true,
                "step": 2,
                "rotation": "auto",
                "style": {
                    "fontSize": "0.714rem",
                    "fontFamily": "Lucida Sans Unicode",
                    "fontWeight": "normal",
                    "fontStyle": "normal",
                    "textDecoration": "none",
                    "color": "#000000"
                }
            }
        }, {
            "min": 0,
            "max": 24.2,
            "tickPixelInterval": 30,
            "tickColor": "#666",
            "labels": {
                "enabled": true,
                "step": 2,
               ...