JSFiddle - React, Tailwind, and code Playground

by Anand Rathod

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<div id="chartScore" style="min-width: 310px; height: 300px; float: center"></div>
<button id="button">update</button>

JavaScript

//
//updated with HighCharts support's suggested fix
//
$(function () {

    function chtScoreFunction(chart) {
        var f, y;
        if (chart.plotHeight <= 200) {
            f = 28;
            y = 18;
        } else if (chart.plotHeight <= 400) {
            f = 60;
            y = 55;
        } else {
            f = 70;
            y = 60;
        };
        chart.series[0].points[2].dataLabel.attr({
            x: chart.plotLeft + (chart.series[0].center[0]) - 40
        });
        chart.series[1].update({
            dataLabels: {
                y: chart.chartHeight - chart.plotTop - chart.plotHeight + y,
                style: {
                    fontSize: f + 'px'
                }
            }
        });
    };

    function chtScoreOptions(chartScoreData) {
        return {
            credits: {
                enabled: false
            },

            chart: {
                type: 'pie',
                plotBorderWidth: 0,
                plotShadow: false,
                renderTo: chartScoreData[0],
                events: {
                    load: function () {
                        chtScoreFunction(this)
                    }
                }
            },

            title: {
                text: ''
            },

            tooltip: {
                enabled: false
            },

            plotOptions: {
                gauge: {
                    dial: {
                        radius: '85%',
                        backgroundColor: 'darkblue',
                        bordercolor: 'darkblue',
                        baseWidth: 10,
                        topWidth: 2,
                        baseLength: '70%', // of radius
                        rearLength: '15%'
                    },
                    pivot: {
                        radius: 0
                    }
                },
                pie: {
                    dataLabels: {
                        distance: 5,
                       ...