Better performance with animated data shifting in realtime data chart apexcharts

[ceraol]

You can look into events in Chart Options. Methods u can use is to apply data shifting after data animation sliding has ended. If your realtime data received is per second, you can apply 500ms to dynamicAnimation, for better shifting animation.

options: {
      chart: {
        id: "realtime",

        type: "line",
        animations: {
          enabled: true,
          dynamicAnimation: {
            enabled: true,
            speed: 500, // Received data interval divide by 2
          },
        },
        toolbar: { show: false },
        zoom: { enabled: false },
        events: {
          animationEnd: (chartContext: any) => {
            const series = chartContext.w.config.series;
            const newSeries = series.map((s: Series) => {
              const data = s.data.slice();
              if (data.length >= maxDataPoints) { here is the limits for the data so that it doesnt bloated ur app memory
                data.shift();
              }
              return { ...s, data: data };
            });
            chartContext.updateSeries(newSeries, false);
          },
        },
      },
    },

I'm also suggesting that the range of ur xaxis should be below ur maxDataPoints, ex: if u want ur xaxis range to 10000 (10 data points) u need to set the maxDataPoints slightly higher than the 10 data points like minimum of extra 2 data points of ur xaxis range.

You can refers to this link to see how Apexcharts manage realtime data for every type of charts.

Originally posted by @ceraol in #105