JSFiddle - React, Tailwind, and code Playground

by AlexLvovsky

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>

CSS

.highcharts-tooltip {
pointer-events: auto !important  
}

.cDiv { 
max-height:100px;
overflow-y:auto;
}

JavaScript

var toolTip = [
  ['INC0841115','INC0841232','INC0841273','INC0841281','INC0841282','INC0841291','INC0841315','INC0841329','INC0841115','INC0841232','INC0841273','INC0841281','INC0841343','INC0841351','INC0841354','INC0841356','INC0841386','INC0841392','INC0841408'],['INC0841670','INC0841700'],'0','0','0',['INC0842488','INC0842546','INC0842548','INC0841115','INC0841232','INC0841273','INC0841281','INC0842568','INC0842569','INC0842753','INC0842768'],['INC0842815','INC0842817','INC0842891','INC0841115','INC0841232','INC0841273','INC0841281','INC0841115','INC0841232','INC0841273','INC0841281','INC0842897'],['INC0843582'],['INC0843792','INC0843984','INC0843997'],'0','0',['INC0844516','INC0844536','INC0841115','INC0841232','INC0841273','INC0841281','INC0841115','INC0841232','INC0841273','INC0841281','INC0841115','INC0841232','INC0841273','INC0841281','INC0841115','INC0841232','INC0841273','INC0841281','INC0841115','INC0841232','INC0841273','INC0841281','INC0844819','INC0845456']
];
$(function() {
  $('#container').highcharts({
    title: {
      text: 'Sample',
      x: -20 //center
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
      ]
    },
    legend: {
      layout: 'vertical',
      align: 'right',
      verticalAlign: 'middle',
      borderWidth: 0
    },
    tooltip: {
      /* useHTML: true, */
      outside: true, 
      pointFormatter: function() {
        var string = '<div class = "cDiv">';
        Highcharts.each(toolTip[this.series.data.indexOf(this)], function(p) {
          string += p + '</a><br>'
        })
        return "Incident<br>" + string + "</div><br />";
      }
    },
    series: [{
      name: 'Sample',
      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]
    }]
  });
});