Issues with updating an Area chart in realtime

[painotpi]

I'm looking to update a chart of type Area in realtime (every second).

This is the piece of code,

// This is a simulated version of the updates
// This will eventually come from a streaming API.

function generateNewEntry(previousEntry) {
    // Define the time increment
    const oneDay = 24 * 60 * 60 * 1000

    // Generate a new timestamp
    const newTimestamp = previousEntry[0] + oneDay

    // Generate variation
    const variation = (Math.random() - 0.5) * 0.5 // +/- 0.25 variation
    const newValue = previousEntry[1] + variation

    // Return the new entry as an array [timestamp, value]
    return [newTimestamp, parseFloat(newValue.toFixed(2))]
  }

  setInterval(function () {
    const pe = data[data.length - 1];
    const newEntry = generateNewEntry(pe);
    chart.appendData([{
      data: [newEntry]
    }])
  }, 1000)

Screen.Recording.2024-07-30.at.9.44.53.AM.mov

The problem is the "white wave" on every re-render. Any pointers or leads to fix this would be great.

I'll update this with a reproducable codesandbox link soon.