How do i use realtime charts without the data array getting infinit long?

[BolverBlitz]

Hey, hope someone might help me here a bit.

So, what did i try.
PowerGraphDataF: got 60 elements, numbers 0 -3600

for(let i = 0; i < PowerGraphDataF.length; i++) {
series.push([Date.now() - 1000 * i, PowerGraphDataF[i]]); // -1000 because eatch datapoint is ~1s apart +- latenzy
}

series.reverse();

New data comes via websocket. Now here is my issue, doing this (like in the example) it slows down after time. Crashes after about 2h

powerChart.updateSeries([{
data: [...powerChart.w.config.series[0].data, [Date.now(), data_payload.Power]]
}])

So i tryed keeping only my 60 datapoints

if(powerChart.w.config.series[0].data.length >= Number(TotalKWH.graph_length)){ //TotalKWH.graph_length is 60 in this case
powerChart.w.config.series[0].data.shift()
}

That keeps my chart short, but it makes the chart wiggle arround. How can i shorten the array but keep the nice animation?

My Chart defenition, in case its important

const options = {
  series: [{
    data: series
  }],
  chart: {
    id: 'realtime',
    height: 350,
    type: 'line',
    animations: {
      enabled: true,
      easing: 'linear',
      dynamicAnimation: {
        speed: 1000
      }
    },
    toolbar: {
      show: false
    },
    zoom: {
      enabled: false
    }
  },
  dataLabels: {
    enabled: false
  },
  stroke: {
    curve: 'smooth'
  },
  markers: {
    size: 0
  },
  xaxis: {
    type: "datetime",
    range: 60 * 1000
  },
  yaxis: {
    max: 600
  },
  legend: {
    show: false
  },
};

powerChart = new ApexCharts(document.getElementById('StromChart'), options);
powerChart.render();