Vue ApexCharts is not smooth

Question

I'm using apex charts to create a graph of real-time data coming in from the back-end.

I have used the demo as a guide and implemented my own real-time chart (https://apexcharts.com/vue-chart-demos/line-charts/realtime/)

I want the data to scroll like in the linked example, currently, mine appears to redraw the line each time it's updated (https://imgur.com/a/1aTc1JV)

I use this function to update the series data with a fixed-length queue which is updated every second (queue.append(newData) and then queue.pop(0))

updateChart: function () {
  var me = this;
  this.intervalid1 = setInterval(() => {

    me.$refs.chart.updateSeries([
      {
        data: this.temperature,
      },
    ]);

  }, 1000);
},