JSFiddle - React, Tailwind, and code Playground

by bahar_Agi

HTML

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

<button id="button">Add series</button>

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

JavaScript

//add series
$(function() {
	$('#container').highcharts('StockChart', {

	    scrollbar: {
            enabled: true
        },

        navigator: {
            enabled: true
        },

	    rangeSelector: {
	    	selected: 1
	    },

        series: []
	});

	$('#button').click(function() {
		var chart = $('#container').highcharts();

        chart.addSeries({
			name: 'ADBE',
			data: ADBE,
            type: 'column'
		});
        
        chart.addSeries({
			name: 'MSFT',
			data: MSFT,
            type: 'column'
		});
        chart.addSeries({
			name: 'third',
			data: MSFT,
            type: 'spline'
		});
        chart.xAxis[0].setExtremes();
        $(this).attr('disabled', true);
	});
});