JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="http://www.highcharts.com/js/testing-stock-exporting.js"></script>
<script type="text/javascript" src="http://www.highcharts.com/samples/data/three-series-1000-points.js"></script>
<div id="container" style="height: 500px"></div>
<button id="adbe">ADBE</button>
<button id="msft">MSFT</button>
<button id="googl">GOOGL</button>
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'
}
},
series: [{
id: 'adbe',
name: 'USD to EUR',
data: ADBE
}]
}, function(chart){
var data = {
'adbe': ADBE,
'msft': MSFT,
'googl': GOOGL
}
$('button').click(function(){
var id = this.id,
series = chart.get(id);
if(series) {
series.remove();
}else{
chart.addSeries({
id: id,
data: data[id]
});
}
});
});
});