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://i.sstatic.net/ZwPqm.jpg)

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);
},

Answer 1

Insted of doing queue.pop(0) set range in xaxis to length - 1 of your initial data (if type: "numeric"). https://apexcharts.com/docs/options/xaxis/#range