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: {
    height: 400,
    backgroundColor: "transparent",
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    type: "pie",
    marginBottom: 100,
    animation: false,
    events: {
      load: function() {
        var chart = this,
          legend = chart.legend,
          point = chart.series.chart;

        // starte with first slice hovered
        chart.series[0].setState = function() {};
        chart.series[0].points[0].onMouseOver();
        

        // Legend hover show tooltip
        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]);
              chart.series[0].setState = function() {};
              console.log("lo hov")              
            }).on('mouseout', function(e) {
              //show first slice tooltip on mouse out
              chart.tooltip.refresh(chart.series[0].points[0]);
              chart.series[0].setState = function() {};
              chart.series[0].points[0].onMouseOver();
            });
          })(i);
        }console.log("lo ")
      },
      redraw: function() {
        var chart = this,
          legend = chart.legend,
          point = chart.series.chart;

        // starte with first slice hovered     
        chart.series[0].setState = function() {};
        chart.series[0].points[0].onMouseOver();

        // Legend hover show tooltip
        for (var x = 0, len = legend.allItems.length; x < len; x++) {
          (function(x) {

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