JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

JavaScript

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
         type: 'pie',
      events: {
        load: function() {
          var series = this.series[0];
          setTimeout(function(){
            (series.points).forEach(function(point, i){
              if (point.y < 5) {
                point.update({dataLabels:{distance: 2}});
              }
            });
          }, 200);
        }
      }
    },
    plotOptions: {
			                pie: {
			                    size : 185,
			                    allowPointSelect: true,
			                    cursor: 'pointer',
			                    dataLabels: {
			                        shadow : true,
			                        distance: -17,
			                        enabled: true,
			                        format : '{point.name}:{point.y: .0f}%',
			                        useHTML:true
			                    },
			                    showInLegend: false
			                }
			            },
      series: [{
        name: 'Brands',
        colorByPoint: true,
        data: [{
            name: 'Chrome',
            y: 60,
            sliced: true,
            selected: true
        }, {
            name: 'IE',
            y: 10
        }, {
            name: 'Firefox',
            y: 20
        }, {
            name: 'Edge',
            y: 3
        }, {
            name: 'Safari',
            y: 3
        }, {
            name: 'Other',
            y: 4
        }]
    }]
});