JSFiddle - React, Tailwind, and code Playground

by Ritwika Das

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modulesexporting.js"></script>
<div id="container" style="height: 500px; min-width: 300px"></div>

JavaScript

(function ($) { // encapsulate jQuery

    $(function () {
        var seriesOptions = [],
            yAxisOptions = [],
            seriesCounter = 0,
            names = ['Electric', 'Oil', 'Gas'],
            colors = Highcharts.getOptions().colors;

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

            $(function () {

                $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
                    // Create the chart
                    window.chart = new Highcharts.StockChart({
                        chart: {
                            renderTo: 'container',
                            zoomType: 'x'
                        },
                         
                        legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: 10,
                y: 100,
                borderWidth: 0
            },

                        rangeSelector: {
                            selected: 12
                        },

                        title: {
                            text: 'Energy Prices'
                        },
                        yAxis:[{opposite:false},{opposite:true},{opposite:true,offset:50}],
                        series: [{
                            name: 'Electric',
                            yAxis:0,


                            data: [
                                [1072915200000, 5.73],
                                [1073001600000, 5.81],
                                [1073088000000, 5.23],
                                [1073174400000, 5.32]
                            ],
                            tooltip: {
                                valueDecimals: 2
                            }
                        }, {
                            name: 'Oil',
yAxis:1,



                            data: [
                                [1072915200000, 29.73],
               ...