JSFiddle - React, Tailwind, and code Playground

by sujay

HTML

<script src="http://code.highcharts.com/stock/1.3.4/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<div class="test">
    <div class="hid">
        <div id="container" style="height: 500px;width: 100%"></div>
        <a href="#" class="reflow"> reflow</a>
    </div>
</div>

CSS

.hid {
    display: none;
}
.test {
    width: 85%;
    margin: auto;
}

JavaScript

$(function () {
    setTimeout(function () {
        $('.hid').removeClass('hid');
    }, 5000);
    
    // Plugin for displaying value information in the legend
    (function (H) {
        H.Chart.prototype.callbacks.push(function (chart) {
            $(chart.container).bind('mousemove', function () {
                if (chart.hoverPoints) {
                    H.each(chart.hoverPoints, function (point) {
                        point.series.value = point.y;
                    });
                    H.each(chart.legend.allItems, function (item) {

                        // destroy SVG elements
                        H.each(['legendItem', 'legendLine', 'legendSymbol'], function (key) {
                            if (item[key]) {
                                item[key] = item[key].destroy();
                            }
                        });

                        if (item.checkbox) {
                            discardElement(item.checkbox);
                        }
                    });
                    chart.legend.render();
                }
            });
        });
        H.Chart.prototype.initReflow = function () {
            var chart = this,
                optionsChart = chart.options.chart,
                renderTo = chart.renderTo,
                reflowTimeout;

            function reflow(e) {
                var width = optionsChart.width || HighchartsAdapter.adapterRun(renderTo, 'width'),
                    height = optionsChart.height || HighchartsAdapter.adapterRun(renderTo, 'height'),
                    target = e ? e.target : window; // #805 - MooTools doesn't supply e

                // Width and height checks for display:none. Target is doc in IE8 and Opera,
                // win in Firefox, Chrome and IE9.
                if (!chart.hasUserSize && width && height && (target === window || target === document)) {

                    if (width !== chart.containerWidth || height !== chart.containerHeight) {
     ...