JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

CSS

body {
    font-family: Arial, Verdana, sans-serif;
}

JavaScript

var chart = new Highcharts.Chart({
        colors: ['#0072BC', '#BFDAFF', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
        credits: { enabled: false },
        tooltip: {
            useHTML:true,
            formatter: function(){
                return this.point.tooltipDisabled ? false : this.point.name +"<br><span style='font-size:18px;vertical-align:middle'>&#8226;</span>"+this.series.name+": <b>"+this.y+"</b>";
            }
        },
        chart: {
               renderTo: 'container',
               backgroundColor: 'rgba(255, 255, 255, 0.1)',
               type: 'pie',
               margin: [0, 0, 0, 0],
               spacingTop: 0,
               spacingBottom: 0,
               spacingLeft: 0,
               spacingRight: 0
        },
        title: { text: null },
        plotOptions: {
               pie: {
                   allowPointSelect: false,
                   size: '100%',
                    dataLabels: { enabled: false }
               }
       },
       series: [{
               showInLegend: false,
               type: 'pie',
               name: 'Pie Chart',
               data: [
                     ['Mobile', 65], // first half of pie
                   {name: 'Other', y:25, tooltipDisabled:false},
                   {name: 'Other', y: 35, tooltipDisabled:true} // second half of pie
               ]
       }]
    });