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>
</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();
                }
            });
        });
    }(Highcharts));
    var chart,
        yAxisOptions = [],
        seriesCounter = 0,
        names = ['MSFT', 'AAPL', 'GOOG'],
        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) {
     

            // 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++;

            if (seriesCounter == 1) {
                createChart([{
                   name: name,
                   data: data
                }]);
                chart.showLoading();
            } else {
                chart.addSeries({name: name, data: data,...