JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<!-- <script src="https://code.highcharts.com/modules/boost.js"></script> 
--> 

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

<button id="update">
Start Update
</button>

JavaScript

function getData(n) {
    var arr = [],
        i,
        a,
        b,
        c,
        spike;
    for (i = 0; i < n; i = i + 1) {
        if (i % 100 === 0) {
            a = 2 * Math.random();
        }
        if (i % 1000 === 0) {
            b = 2 * Math.random();
        }
        if (i % 10000 === 0) {
            c = 2 * Math.random();
        }
        if (i % 50000 === 0) {
            spike = 10;
        } else {
            spike = 0;
        }
        arr.push(
            2 * Math.sin(i / 100) + a + b + c + spike + Math.random()
        );
    }
    return arr;
}

const numSamplesPerSecond = 1000, // 1Khz sample rate
			numSecondsOfData = 100,     // Save last 100 seconds of data
      numChannels = 20,
      updateInterval = 1; // number of seconds between updates
      
const totalDataPoints = numSamplesPerSecond * numSecondsOfData * numChannels;

console.log('Processing ' + totalDataPoints + ' raw data points');

console.time('Building fake data');

const series = [];

for (let seriesIndex = 0; seriesIndex < numChannels; seriesIndex++) {
	series.push({
  	data: getData(numSamplesPerSecond * numSecondsOfData),
    lineWidth: 0.5
  });
}

console.timeEnd('Building fake data');

console.time('Total chart creation');
const chart = Highcharts.stockChart('container', {

    chart: {
        zoomType: 'x',
        animation: false
    },

    /*boost: {
        useGPUTranslations: true,
        seriesThreshold: 1, // force boost on when more than 1 series
        debug: {
        	timeSetup: true,
          timeSeriesProcessing: true,
          timeBufferCopy: true,
          timeKDTree: true
        }
    },*/
    
    plotOptions: {
      /*series: {
      	// force boost on when more than 100 pts per series
        boostThreshold: 100
      },*/
      
      // Use this to disable data grouping or to 
      // control the setting for it. A higher 
      // groupPixelWidth increases the amount of 
      // grouping (decreases resolution)
      //...