JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://github.highcharts.com/v3.0Beta/highstock.js"></script>
<div id="container" style="height: 500px; min-width: 600px"></div>

CSS

div[id^=hc-tooltip] text {
    padding-left  : 5px;
    padding-right : 5px;
    white-space : nowrap;
}
div[id^="hc-tooltip"] > span {
    padding-left: 5px;
}
div[id^=hc-tooltip] text span {
    cursor : default;
}
div[id^=hc-tooltip] text span:hover {
    color : black !important;
}
div[id^=hc-tooltip] {
    height : 60px;
    white-space : normal;
}

JavaScript

$(function() {
    var seriesOptions = [],
        yAxisOptions = [],
        seriesCounter = 0,
        names = ['MSFT', 'AAPL', 'GOOG', 'ADBE'],
        colors = Highcharts.getOptions().colors;

    $.each(names, function(i, name) {

        $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=' + name.toLowerCase() + '-c.json&callback=?', function(data) {

            seriesOptions[i] = {
                name: name,
                id: name,
                data: data,
            };

            // As we're loading the data asynchronously, we don't know what order it will arrive. So
            // we keep a counter and create the chart when all the data is loaded.
            seriesCounter++;

            
            
                createChart();
            }
        });
    });



    // create the chart when all data is loaded

    function createChart() {

        chart = new Highcharts.StockChart({
            chart: {
                tooltipOutsidePlot: true,
                renderTo: 'container',
                events: {
                    load: function(event) {
                        setTimeout(function() {
                            var points = [],point;
                            $.each(chart.series, function(i, serie) {
                                if (serie.options.showInLegend 
                                    && serie.tooltipPoints 
                                    && serie.tooltipOptions.enabled 
                                    && (point = serie.data[serie.data.length - 1]) !== undefined) {
                                    points.push(point);
                                }
                            });
                            chart.tooltip.refresh(points);
                        }, 150);
                    }
                }
            },

            rangeSelector: {
                selected: 4,
                inputEnabled: false
            },

            yAxis: {
               ...