vue-apexchart realtime chart is not smooth

Question

In apexcharts, realtime chart is not smooth.

when I just use only one chart, working smoothly. but two charts, not working smoothly

I just followed the official demo(https://apexcharts.com/vue-chart-demos/line-charts/realtime/) and just add one more chart and add the function for the second chart. full code is here https://codesandbox.io/s/vue-template-fhjbr?fontsize=14

and this is part of code

// html codes

var data1 = [];
var data2 = [];

function getDayWiseTimeSeries(baseval, count, yrange) {
  var i = 0;
  while (i < count) {
    var x = baseval;
    var y =
      Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;

    data1.push({
      x,
      y
    });
    data2.push({
      x,
      y
    });
    lastDate = baseval;
    baseval += 86400000;
    i++;
  }
}

getDayWiseTimeSeries(new Date("11 Feb 2017 GMT").getTime(), 10, {
  min: 10,
  max: 90
});

function getNewSeries(baseval, yrange) {
  var newDate = baseval + 86400000;
  lastDate = newDate;
  data1.push({
    x: newDate,
    y: Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min
  });
  data2.push({
    x: newDate,
    y: Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min
  });
}

function resetData() {
  data1 = data1.slice(data1.length - 10, data1.length);
  data2 = data2.slice(data2.length - 10, data2.length);
}

export default {
  name: "home",
  components: {
    apexchart: VueApexCharts
  },
  data() {
    return {
      series1: [
        {
          data: data1.slice()
        }
      ],
      series2: // same with series1
      chartOptions: {
        chart: {
          animations: {
            enabled: true,
            easing: "linear",
            dynamicAnimation: {
              speed: 900
            }
        //...
      }
    };
  },
  mounted() {
    this.intervals1();
    this.intervals2();
  },
  methods: {
    intervals1: function() {
      var me = this;
      window.setInterval(function() {
        getNewSeries(lastDate, {
          min: 10,
          max: 90
        });
        console.log(data1);
        me.$refs.realtimeChart1.updateSeries([
          {
            data: data1
          }
        ]);
      }, 900);

      // every 60 seconds, we reset the data to prevent memory leaks
      ...
    },
    intervals2: //same with intervals1()
  }
};
</script>

Answer 1

The dynamicAnimation is different in your codesandbox. It should be below one

dynamicAnimation: {
    speed: 1000
}

And also the you calling two methods intervals1() and intervals2(). instead of calling 2 methods, just create one function intervals() and in that you can set you both chart data.

Please check this working example with two charts.

Code Snippet

export default {
  name: "home",
  components: {
    apexchart: VueApexCharts
  },
  data() {
    return {
      series1: [{ data: data1.slice() }],
      series2: [{ data: data2.slice() }],
      chartOptions: {
        chart: {
          animations: {
            enabled: true,
            easing: "linear",
            dynamicAnimation: {
              speed: 1000
            }
          },
          toolbar: {
            show: false
          },
          zoom: {
            enabled: false
          }
        },
        dataLabels: {
          enabled: false
        },
        stroke: {
          curve: "smooth"
        },

        title: {
          text: "Dynamic Updating Chart",
          align: "left"
        },
        markers: {
          size: 0
        },
        xaxis: {
          type: "datetime",
          range: 777600000
        },
        yaxis: {
          max: 100
        },
        legend: {
          show: false
        }
      }
    };
  },
  mounted() {
    this.intervals();
  },
  methods: {
    intervals: function() {
      var me = this;
      window.setInterval(function() {
        getNewSeries(lastDate, { min: 10, max: 90 });
        me.$refs.realtimeChart1.updateSeries([{ data: data1 }]);
        me.$refs.realtimeChart2.updateSeries([{ data: data2 }]);
      }, 1000);

      // every 60 seconds, we reset the data to prevent memory leaks
      window.setInterval(function() {
        resetData();
        me.$refs.realtimeChart1.updateSeries([{ data: [] }], false, true);
        me.$refs.realtimeChart2.updateSeries([{ data: [] }], false, true);
      }, 60000);
    }
  }
};