React App hardly loads when loading large data sets into line chart

[srichter98]

Hello, we are currently working on a module for our React app and want to integrate a line chart.

Our React app hardly loads when loading large data sets (example 100,000 - 300,000) and sometimes does not provide any feedback. Only leaving and reloading the page allows interacting with the app again.

We assume that this happens in connection with the chart.

Is there a way to load this big dataset? 

Following you'll find a code snipptet of our implementation:

function MachineCycleData(props) {
  const machineCycle = useSelector(selectMachineCycle);
  const [currentCycle, setCurrentCycle] = useState([]);
  const [time, setTime] = useState([]);


  const series = [
    {
      name: 'machine cycle',
      data: currentCycle,
    },
  ];
  let options = {
    chart: { id: 'machine-cycle', type: 'line' },
    stroke: {
      curve: 'stepline',
    },
    animations: {
      enabled: false,
    },
    xaxis: {
      type: 'datetime',
      categories: time,
      labels: {
        show: true,
        format: 'dd.MM.yy HH:mm:ss',
      },
      min: new Date('2023-02-27T09:00:00Z').getTime(), //Test
      max: new Date('2023-02-27T09:59:00Z').getTime(), //Test
    },
    tooltip: {
      theme: 'dark',
      x: {
        format: 'dd.MM.yy HH:mm:ss',
      },
    },
    legend: {
      position: 'top',
      fontSize: 14,
      offsetY: 0,
      markers: {
        width: 9,
        height: 9,
      },
    },
  };

 

  useEffect(() => {
    setCurrentCycle(
      machineCycle?.map((item) => (item.currentcycletime === null ? 0 : item.currentcycletime))
    );
    setTime(machineCycle?.map((item) => parseFloat(item.timestamp)));
  }, [machineCycle]);

 

  if (currentCycle.length == 0) {
    return null;
  }

 

  return (
<div className="w-full h-full flex flex-col">
<Chart options={options} series={series} height={'97%'} width={'100%'} />
</div>
  );
}