JSFiddle - React, Tailwind, and code Playground

by Torstein Hønsi

HTML

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

<div id="container" style="height: 300px"></div>

<!--<button id="addaxis">1. Add Y axis</button> -->
<button id="addseries">2. Add series</button>
<!-- <button id="removeseries">3. Remove primary series</button> -->
<button id="switchtheme">4.Switch Theme</button>

JavaScript

var theme = {
                colors: ["#DDDF0D", "#7798BF", "#55BF3B", "#DF5353", "#aaeeee", "#ff0066", "#eeaaee", "#55BF3B", "#DF5353", "#7798BF", "#aaeeee"],
                chart: {
                    backgroundColor: {
                        linearGradient: [0, 0, 0, 200],
                        stops: [
                            [0, 'rgb(36, 36, 36)'],
                            [1, 'rgb(16, 16, 16)']
                        ]
                    },
                    borderWidth: 1,
                    borderColor: 'silver',
                    borderRadius: 8,
                    plotBackgroundColor: null,
                    plotShadow: false,
                    plotBorderWidth: 0
                },
                  credits: {
                                enabled: false
                            }
  };


var chart = new Highcharts.StockChart({

    chart: {
        renderTo: 'container'
    },

   /* xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },*/
    yAxis:{
    },
    series: [{
        data:  [[1344558884000, 5.45], [1344563960000, 5.32], [1344569455000, 2.14]]
    }]

});

$('#addaxis').click(function () {
    chart.addAxis({
        opposite: true,
        title: {
            text: 'Secondary'
        }
    });    
});

var i = 2;

$('#addseries').click(function () {
    var a = chart.series.length;
    chart.addAxis({
        opposite: true,
        id:"123",
        title: {
            text: 'Secondary'
        }
    });   
    var seriesOptions = {
        data: [[1344558884000, 15.45], [1344563960000, 25.32], [1344569455000, 32.14]],
        yAxis: a
    }
    chart.addSeries(seriesOptions,true);
    chart.options.series.push(seriesOptions);
});



$('#removeseries').click(function () {
    chart.series[0].remove
    chart.get("123").remove();
});

$('#switchtheme').click(function () {
    var options = chart.options;
    console.log(options.yAxis,...