JSFiddle - React, Tailwind, and code Playground

by philderksen

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>


<div id="container" style="height: 500px; min-width: 600px"></div>

JavaScript

$(function() {
    var seriesOptions = [],
        yAxisOptions = [],
        seriesCounter = 0,
        names = ['MSFT', 'AAPL', 'GOOG'],
        colors = Highcharts.getOptions().colors;
    
    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename='+ names[0].toLowerCase() +'-c.json&callback=?',    function(data) {

        firstSeriesData = [{
            name: names[0][0],
            data: data
        }];
        
        console.log(firstSeriesData);
        var chart = createChart(firstSeriesData);
        
        $.each(names, function(i, name) {
            
            if (i==0) { return; }
    
            $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename='+ names[i].toLowerCase() +'-c.json&callback=?',    function(data) {
    
                var newSeriesData = {
                    name: names[i][0],
                    data: data
                };
                
                console.log(newSeriesData);
                chart.addSeries(newSeriesData);
            });
        });            
    });
});

function createChart(firstSeriesData) {

    chart = new Highcharts.StockChart({
        chart: {
            renderTo: 'container'
        },

        rangeSelector: {
            selected: 4
        },

        yAxis: {
            labels: {
                formatter: function() {
                    return (this.value > 0 ? '+' : '') + this.value + '%';
                }
            },
            plotLines: [{
                value: 0,
                width: 2,
                color: 'silver'
            }]
        },
        
        plotOptions: {
            series: {
                compare: 'percent'
            }
        },
        
        tooltip: {
            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
            valueDecimals: 2
        },
        
        series: firstSeriesData
    });
    
    return chart;
}