JSFiddle - React, Tailwind, and code Playground

by anikettiwari

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; margin: 0 auto"></div>

JavaScript

$(function() {
  var chart;
  $('#container').highcharts({
    chart: {
      events: {
        load: function() {
          chart = this;
          this.myTooltip = new Highcharts.Tooltip(this, this.options.tooltip);
         // debugger
          this.tooltip.label.element.remove();
        }
      }
    },
    tooltip: {
      shared: true,
      enabled: true,
    },
    plotOptions: {
      series: {
        point: {
          events: {
            mouseOver: function(e) {
              var i = this.x;
              points = [];
              Highcharts.each(this.series.chart.series, function(s) {
                Highcharts.each(s.data, function(p) {
                  if (p.x === i) {
                    points.push(p)
                  }
                })
              });
              myTooltip = chart.myTooltip;
              setTimeout(function() {
                myTooltip.refresh(points, e)
              }, 1000)

            }, mouseOut: function() {
            setTimeout(function() {
            chart.myTooltip.hide();
              }, 1000)
            }
          }
        }
      }
    },
    series: [{
      name: 'Tokyo',
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }, {
      name: 'New York',
      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
    }, {
      name: 'Berlin',
      data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
    }, {
      name: 'London',
      data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
    }]
  });
});