JSFiddle - React, Tailwind, and code Playground

by sujay

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

            if (seriesCounter == names.length) {
                seriesOptions[seriesCounter] =  {
                type: 'flags',
                id: 'AAPL-flags',    
                data: [{
                    x: Date.UTC(2010, 6, 1),
                    title: 'AAPL UP'
                }],
                tooltip: {
                    enabled: false
                },
                onSeries: 'AAPL',
                shape: 'squarepin',
                visible: false
            };
                seriesOptions.filter(function(el){
                    return el.name === 'AAPL';
                })[0].flagsId = 'AAPL-flags';
                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 
                                    &&...