JSFiddle - React, Tailwind, and code Playground

by Itsearnest

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<div id="info"></div>
<button id="add">Add Series</button>
<div id="container"></div>

JavaScript

var chart = Highcharts.stockChart('container', {
	chart: {
		zoomType: "x"
	},
  navigator:{
  	enabled:false
  },
  yAxis:[{},{}],
  xAxis:{
  	events:{
    	afterSetExtremes: (event) => {
      	var info = document.getElementById("info");
        info.innerHTML = "";
      	chart.series.forEach((elem) =>{
        	info.innerHTML += ("Data grouped for " + elem.name +": " + elem.hasGroupedData) + "<br>";
        });
      }
    }
  },
  series: [{
    data: Array.from({length: 50000}, () => Math.floor(Math.random() * 500))
  }]
});

document.getElementById("add").onclick  = (event) => {
	var base = Math.floor(Math.random()*1000);
	chart.addSeries({
		data: Array.from({length: 50000}, () => base + Math.floor(Math.random() * 500))
	});
};