JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0px auto"></div>

JavaScript

$(function() {
  var colors = [
    '#0066FF',
    '#33CC33',
    '#FF0000',
    '#FFFF00',
  ];
  $('#container').highcharts({
    chart: {
      type: 'pie'
    },

    credits: {
      enabled: false
    },
    exporting: {
      enabled: false
    },
    legend: {

      symbolHeight: 1,
      symbolWidth: 1,
      symbolRadius: 0,
      useHTML: true,
      align: 'right',
      verticalAlign: 'top',
      itemWidth: 100,
      layout: 'vertical',
      x: 0,
      y: 100,
      labelFormatter: function() {

        return '<div style="padding:5px;width:55px;background-color:' + this.color + '"><span style="color: #ffffff;">' + this.name + ': <b>' + this.y + '</b> </span></div> </n>';
      }
    },
    yAxis: {
      title: {
        text: 'Total percent market share'
      }
    },
    plotOptions: {

      pie: {
        showInLegend: true,
        dataLabels: {
          format: '<b>{point.y}</b>',

          style: {
            fontWeight: 'bold',
            color: 'white'
          }
        },
        point: {
          events: {
            legendItemClick: function() {
              return false;
            },
            mouseOver: function(e) {
              var that = this;
              var series = this.series;
              console.log(series)
              for (var i = 0; i < series.data.length; i++) {
                var point = series.data[i];
                console.log(point)
                if (point == this) {
                  console.log('yes')
                  point.update({
                    color: series.chart.options.colors[this.index],
                    dataLabels: {
                      enabled: true
                    }
                  });
                } else {
                  point.update({
                    color: '#CCCCCC',
                    dataLabels: {
                      enabled: false
                    }
                  });
                }
              }
           //  ...