JSFiddle - React, Tailwind, and code Playground

by Pawan Jadhav

HTML

<script src="http://code.highcharts.com/highcharts.src.js"></script>
<script src="http://code.highcharts.com/highcharts-more.src.js"></script>

<div id="container" style="min-width: 310px; max-width: 400px; height: 500px; margin: 0 auto"></div>

JavaScript

(function (H) {
    H.wrap(H.Series.prototype, 'drawDataLabels', function (proceed) {
        this.data[0].dataLabels.y = this.yAxis.pane.center[2]/2;
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
        
    });
}(Highcharts));



    var chart = new Highcharts.Chart({
        chart: {
        renderTo: 'container'
    },
        
        "plotOptions": {
            "gauge": {
                "animation": false,
                "cursor": "pointer",
                "showInLegend": true,
                "turboThreshold": 0,
                "events": {}
            }
        },
        "legend": {
            "enabled": true,
            "item": {},
            "borderWidth": 0,
            "layout": "horizontal",
            "backgroundColor": "rgba(255,255,255,0)",
            "itemStyle": {
                "color": "#000000",
                "fontSize": "0.857rem",
                "fontFamily": "Lucida Sans Unicode",
                "fontWeight": "normal",
                "fontStyle": "normal",
                "textDecoration": "none"
            },
            "align": "center",
            "verticalAlign": "bottom",
            "margin": 0,
            "padding": 5
        },
       
        "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": 400000,
            "max": 800000,
            "tickPixelInterval": 30,
            "tickColor": "#666",            
            "pane": 0,
            "plotBands": []
        }, {
            "min": 8.1,
            "max": 800000,
            "tickPixelInterval": 30,
        ...