JSFiddle - React, Tailwind, and code Playground

by Haze32

HTML

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

JavaScript

Highcharts.chart('container', {
  chart: {
    animation: false,
    height: 400,
    backgroundColor: "transparent",
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    type: "pie",
    marginBottom: 100,
    events: {
      load: function() {
        var chart = this,
          legend = chart.legend;

        chart.tooltip.refresh(chart.series[0].points[0]);

        console.log(this.series[0].points[0].shapeArgs.r)

        for (var i = 0, len = legend.allItems.length; i < len; i++) {
          (function(i) {

            var item = legend.allItems[i].legendItem;
            item.on('mouseover', function(e) {
              //show custom tooltip here
              chart.tooltip.refresh(chart.series[0].points[i]);

              if (i === 0) {
                chart.series[0].points[0].update({
                  opacity: 1
                });

                chart.tooltip.refresh(chart.series[0].points[0]);


              } else {
                chart.series[0].points[0].update({
                  opacity: .5
                });
                chart.series[0].points[i].update({
                  opacity: 1
                });

                chart.tooltip.refresh(chart.series[0].points[i]);


              }


            }).on('mouseout', function(e) {
              chart.series[0].points[i].update({
                opacity: .5
              });
              chart.series[0].points[0].update({
                opacity: 1
              });
              //show first slice tooltip
              chart.tooltip.refresh(chart.series[0].points[0]);

              //hov(0, 8);

            });
          })(i);
        }

      },
      redraw: function() {
        var chart = this,
          legend = chart.legend;

        chart.tooltip.refresh(chart.series[0].points[0]);


        /*this.series[0].points[0].graphic.attr({
          r: this.series[0].points[0].shapeArgs.r,

        });
        console.log("X")*/


      }

    }
 ...