JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="width:348px; height:300px;margin: 0 auto"></div>
<div class="math">72 + 28 = 100, not 100.0000000000000000000000004</div>

CSS

body {
    background-color: #f8f8f8;
}

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
            width: 348,
            height: 300,
            backgroundColor: "#f8f8f8",
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: null
        },
        tooltip: {
            headerFormat: '{series.name} ',
            pointFormat: '{point.name}<br /><b>{point.percentage:.0f}%</b>',
            valueDecimals: 0,
            percentageDecimals: 0            
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b><br />{point.percentage:.0f} %'
                }
            }
        },
        labels: {
            style: {
                "font-size": "50px"
            }
        },
        series: [{
            type: 'pie',
            name: 'Courses',
            data: [{
                name: 'To finish',
                y: 28,
                sliced: true,
                selected: true
            }, ['Completed', 72]]
        }]
    });
});