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

$(function () {

    function chtScoreFunction(chart) {
        chart.series[0].points[2].dataLabel.attr({
            x: chart.plotLeft + (chart.series[0].center[0]) - 40
        });
        var p = chart.series[1].points[0].dataLabel;
        var x1, y1, f;
        if (chart.plotHeight <= 50) {
            f = 28;
            x1 = 35;
            y1 = 2;
        } else if (chart.plotHeight <= 250) {
            f = 38;
            x1 = 40;
            y1 = 15;
        } else if (chart.plotHeight <= 300) {
            f = 44;
            x1 = 44;
            y1 = 20;
        } else if (chart.plotHeight <= 350) {
            f = 52;
            x1 = 49;
            y1 = 27;
        } else if (chart.plotHeight <= 400) {
            f = 60;
            x1 = 54;
            y1 = 32;
        } else {
            f = 70;
            x1 = 60;
            y1 = 40;
        };
        p.css({
            fontSize: f + 'px'
        });
        p.attr({
            x: chart.plotLeft + (chart.series[0].center[0]) - x1
        });
        p.attr({
            y: chart.plotTop + chart.series[0].points[4].dataLabel.y + y1
        });
    };

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

            title: {
                text: ''
            },

            tooltip: {
                enabled: false
            },

            plotOptions: {
                gauge: {
                    dial: {
                        radius: '85%',
                        backgroundColor: 'darkblue',
                        bordercolor: 'darkblue',
                       ...