JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="width: 600px; height: 350px; margin: 0 auto"></div>


<div id="tooltip"></div>

JavaScript

$(document).ready(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container'
        },
        tooltip: {       
            formatter:function(){
                
                $('#tooltip').html(this.y);
                return this.y;
            }
        },
/*         plotOptions: {
            series: {
                events: {
                    show: function () {
                        var chart = this.chart,
                            series = chart.series,
                            i = series.length,
                            otherSeries;
                        while (i--) {
                            otherSeries = series[i];
                            if (otherSeries != this && otherSeries.visible) {
                                otherSeries.hide();
                            }
                        }
                    }
                   legendItemClick: function() {
                        if(this.visible){
                             return false;   
                        }
                    }
                }
            }
        }, */
        series: [{
            data: [7, 6, 9, 14, 18, 21, 25, 26, 23, 18, 13]
        }, {
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6],
            visible: false
        }, {
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9],
            visible: false
        }, {
            data: [-1, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6],
            visible: false
        }]

    });

});