JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="width: 350px; height: 350px; margin: 0 auto"></div>

CSS

.highcharts-container {
    overflow: visible !important;
}
.MyChartTooltip {
    position: relative;
    z-index: 50;
    border: 2px solid rgb(0, 108, 169);
    border-radius: 5px;
    background-color: #ffffff;
    padding: 5px;
    font-size: 9pt;
}

JavaScript

$(function () {
    $('#container').highcharts({
        colors: ['#9FD376', '#629AEC', '#FAD067', '#50C1E5', '#AD92E6', '#45CEB0', '#FB6C59', '#F087BB', '#6CC7CD', '#6CA0CD'],
        chart: {
            type: 'pie',
        },
        credits: {
            enabled: false
        },
        series: [{
            innerSize: '80%',
            data: [
                ['Email', 2],
                ['Chat', 1],
                ['Facebook', 1],
                ['Phone', 2]
            ]
        }],
        legend: {
            enabled: true,
            align: 'center',
            verticalAlign: 'bottom',
            itemMarginTop: 8,
            itemStyle: {
                font: '14px "ProximaNovaRegular" ,sans-serif',
            },
            symbolHeight: 10,
            symbolWidth: 10,
            symbolRadius: 2
        },
        title: {
            text: '<span id="agentCountId" class="ag-count">6</span><br><span class="ag-label">myTickets</span>',
            align: 'center',
            verticalAlign: 'middle',
            y: -45,
            useHTML: true,
        },
        plotOptions: {
            pie: {
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    connectorWidth: 0,
                    distance: 5,
                    formatter: function () {
                        return '<b><span class="ag-title">' + this.percentage.toFixed(0) + '&#37; </span></b><br><span class="DvsubHead"> ' + this.point.name + '</span>';
                    },
                    style: {
                        color: '#000000',
                    },
                    useHTML: true
                },
                showInLegend: true,
                startAngle: -180,
                endAngle: 180,
                minSize: 215,
                center: ['50%', '50%'],
                borderWidth: 0,
                point: {
                    events: {

                    }
               ...