JSFiddle - React, Tailwind, and code Playground

HTML

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

<div id="container" style="width: 400px; height: 300px; margin: 0 auto"></div>

CSS

.name{
    width: 190px;
}
.value{
    width: 60px;
}

JavaScript

$(function () {
    var totalText;
    
    var chart = new Highcharts.Chart({

        chart: {
            renderTo: 'container',
            type: 'pie',
            width: 500,
            borderWidth: 2,
            events: {
                load: function(event) {
                    var total = 0;
                    for(var i=0, len=this.series[0].yData.length; i<len; i++){
                        total += this.series[0].yData[i];
                    }
                    totalText = this.renderer.text(
                        'Total: ' + total,
                        this.plotLeft,
                        this.plotTop - 20
                    ).attr({
                        zIndex: 5
                    }).add()
                }
            }
        },

        plotOptions: {
            pie: {
                point: {
                    events: {
                        legendItemClick: function(e) {
                            var newTotal = this.series.total + (this.visible ? -this.y : this.y);
                            totalText.attr({ text: 'Total: '+newTotal });
                        }
                    }
                }
            }
        },
        
        title: {
            text: 'demo'
        },

        credits: {
            enabled: false
        },

        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            y: 30,
            labelFormat: '{name} ({y})',
            navigation: {
                activeColor: '#3E576F',
                animation: true,
                arrowSize: 12,
                inactiveColor: '#CCC',
                style: {
                    fontWeight: 'bold',
                    color: '#333',
                    fontSize: '12px'    
                }
            }
        },
    tooltip: {
            formatter: function() {
                return Highcharts.numberFormat(this.percentage, 2) + '%<br />' + '<b>' + this.point.name +...