I am trying to write a streaming line chart with Apex Charts, but I don't quite understand the update and so the charts flicker

Question

I am fetching data via web API so a new value comes in well after the chart loads. What is the right way to add a new data point (and delete old data points so it doesn't run out of memory)?

I started following this example: Apex Realtime Example

and here is my adapted code pen: Code Pen Adapted version

Code is here:

var lastX = 0;
var data = [[lastX, 10]]; // starter data
var nextPoint = (lo, hi) => Math.floor(Math.random() * (hi - lo) + lo);
var options = {
  series: [
    {
      data: []
    }
  ],
  chart: {
    height: "100%",
    width: "100%",
    type: "line",

    toolbar: {
      show: false
    },
    zoom: {
      enabled: false
    }
  },
  stroke: {
    show: true,
    //curve: 'smooth',
    lineCap: "butt",
    colors: ["#39c", "red"],
    width: 2,
    dashArray: 0
  },
  dataLabels: {
    enabled: false
  },
  noData: {
    text: "Waiting for Data ..."
  },
  title: {
    text: "Apex Chart Auto Updating Chart",
    align: "left"
  },
  markers: {
    size: 0
  },
  xaxis: {
    type: "numeric"
  },
  yaxis: {
    range: { min: 0, max: 250 }
  },
  legend: {
    show: false
  },
  redrawOnWindowResize: true
};

function getNewSeries(baseval, yrange) {
  var newVal = lastX + 1;
  lastX = newVal;

  data.push([newVal, nextPoint(5, 190)]);

  if (data.length > 50) data.shift();
}

var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

window.setInterval(function () {
  getNewSeries(lastX, { min: 10, max: 90 });
  chart.updateSeries([{ data: data }], true);
}, 100);

Tried adapting example and it flickers