JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div class="chartTitle">Chart Title</div>
<div class="pieContainer">
    <div id="container2"></div>
    <div id="addText"></div>
</div>

CSS

.center {
    font-size:70px;
    font-family:century gothic;
    font-weight:700;
    color:#626264;
    display:block;
    padding-top:45px;
}
.pieContainer {
    height:400px;
}
.chartTitle{
    text-align:center;
    font-size:18px;
    font-weight:700;
    font-family:'century gothic';
    padding-top:10px;
}
.highcharts-series-group {
  top: 0;
}

JavaScript

$(function () {
        
     var chartData = new Array();
    chartData[0] = 65;
    chartData[1] = 35;

var chartColors = new Array();
    chartColors[0] = '#4bc05f';
        chartColors[1] = '#c11e2f';
    
    Highcharts.setOptions({
        colors: chartColors
    });
    var chart1 = new Highcharts.Chart({
        chart: {
            renderTo: 'container1',
            type: 'pie'
        },
        chart: {
            renderTo: 'container2',
            type: 'pie'
        },
        credits: {
            enabled: false
        },
        title: {
            text: '',
            style: {
                display: 'none'
            }
        },
        tooltip: {
            enabled: true
        },
        plotOptions: {
            pie: {
                shadow: false,
                size: '100%',
                innerSize: '90%',
                showInLegend: false,
                dataLabels: {
                    enabled: false
                }
            }
        },
        series: [{
            data: 
               chartData
            
        }]
    },
    // using 

    function (chart1) { // on complete
        var textX = chart1.plotLeft + (chart1.plotWidth * 0.5);
        var textY = chart1.plotTop + (chart1.plotHeight * 0.5);
        
        
        
        var indexOfMaxNumber = chartData.indexOf(Math.max.apply(window,chartData));
        var colorHex = chartColors[indexOfMaxNumber]
        
        var span = '<span id="pieChartInfoText" style="position:absolute; text-align:center;">';
        span += '<span class="center" style="color:'+colorHex+';">' + Math.max.apply(window,chartData) + '%' + '</span>';
        span += '</span>';

        $("#addText").append(span);
        span = $('#pieChartInfoText');
        span.css('left', textX + (span.width() * -0.5));
        span.css('top', textY + (span.height() * -0.5));

        // Render the circle
        chart1.renderer.circle(xpos, ypos, circleradius).attr({
           ...