JSFiddle - React, Tailwind, and code Playground

by hfrntt

HTML

<script type="text/javascript" src="https://raw.github.com/highslide-software/highcharts.com/stock2/js/highstock.src.js"></script>

<script type="text/javascript" src="http://www.highcharts.com/samples/data/usdeur.js"></script>
<script type="text/javascript" src="http://www.highcharts.com/samples/data/three-series-1000-points.js"></script>

<button id="remove">Remove series</button>
<button id="add">Add series</button>
<div id="container" style="height: 500px"></div>

JavaScript

jQuery(function() {
    // Create the chart    
    window.chart = new Highcharts.StockChart({
        chart: {
            renderTo: 'container'
        },
        
        rangeSelector: {
            selected: 1
        },
        
        title: {
            text: 'USD to EUR exchange rate'
        },
        
        xAxis: {
            maxZoom: 14 * 24 * 3600000 // fourteen days
        },
        yAxis: {
            title: {
                text: 'Exchange rate'
            }
        },
        
        navigator: {
            series: {
                id: 'navigator'
            }
        },
        
        series: [{
            name: 'USD to EUR',
            data: usdeur
        }]
    }, function(chart){
        $('#remove').click(function(){
            var s = chart.series,
                l = s.length;
            
/*            while(  ) {
                if (s[i].name !== 'Navigator')
                    s[i].remove();
            }
            chart.series[0].remove();*/
        });
        
        $('#add').click(function(){
            chart.series[0].setData(ADBE)
            chart.addSeries({name: 'ADBE', data: ADBE})
        });
    });
});