JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div class="pieContainer">
    <div id="container1" ></div>
    <div id="addText"></div>
</div>

<!-- <div class='fullscreenDiv'>
    <div class="center">Hello World</div>
</div>



     // Render the text 
        chart1.renderer.text(chart1.series[0].data[0].total + '\n Tasks', 100, 230).css({
            width: circleradius * 2,
            color: '#4bc05f',
            fontSize: '100px',
            fontFamily: 'century gothic',
            fontWeight: '700',
            textAlign: 'center'
        }).attr({
              zIndex: 999
        }).add();


-->

CSS

.center {
    font-size:60px;
    font-family:century gothic;
    font-weight:700;
    color:#828283;
    display:block;
}
.text {
    font-size:30px;
    font-family:century gothic;
    font-weight:700;
    color:#828283;
    display:block;
    margin-top: -25px;
}
.pieContainer {
    min-width:300px;
}

JavaScript

var colores = ['#4bc05f', '#eab70c', '#67c9d6', '#4f7373', '#f99800', '#626264', '#c11e2f'];

$(function painter() {
    Highcharts.setOptions({
        colors: colores
    })
    var chart1 = new Highcharts.Chart({
        chart: {
            renderTo: 'container1',
            type: 'pie'
        },
        credits: {
            enabled: false
        },
        title: {
            text: '',
        },
        tooltip: {
            enabled: true
        },
        legend: {
            align: 'right',
            verticalAlign: 'middle',
            layout: 'vertical',
            itemStyle: {
                 font: '13px century gothic',
                 color: colores
                 
              }
            
        },
        plotOptions: {
            pie: {
                shadow: false,
                size: '100%',
                innerSize: '85%',
                showInLegend: true,

                dataLabels: {
                    enabled: false
                },
            },
        },
        series: [{
            data: [
                ['Completed', 45],
                ['In Progress', 15],
                ['Waiting', 8],
                ['Pending', 6],
                ['Warnings', 4],
                ['Rejected', 12],
                ['Failed', 10]
            ]
        }]
    },
      // using                                 
    function (chart1) { // on complete
        var textX = chart1.plotLeft + (chart1.plotWidth  * 0.5);
        var textY = chart1.plotTop  + (chart1.plotHeight * 0.5);

        var span = '<span id="pieChartInfoText" style="position:absolute; text-align:center;">';
        span += '<span class="center">' + chart1.series[0].data[0].total +'</span>';
        span += '<span class="text">Tasks</span>';
        span += '</span>';

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