Memory leak when using realtime charts

[mcrapts]

Codepen

The bug in question is illustrated by the realtime demo on the website: https://apexcharts.com/javascript-chart-demos/line-charts/realtime/

Explanation

Expected behaviour:
Be able to remove non-visible data points (avoiding memory leaks) while retaining the realtime animation

What is happening:
Two twings can happen:

1. Do nothing and the series array containing the datapoints will keep expanding forever (memory leak). The animation looks as expected, but after a few minutes the browser will start struggling due to the memory leak.
2. Remove non-visible data points from the series. This avoids the memory leak, but the realtime animation is not there anymore and instead you get weird animations when data points move in a vertical manner. The demo on the website solves this by "resetting" the data series every 60 seconds, but this causes the chart to show glitchy behaviour every 60 seconds.

I hope it is possible to fix this. In its current form the realtime chart is unfortunately not usable for anything other than demo purposes. That's a shame because ApexCharts is a really nice looking promising charting library and the realtime chart could be a killer feature.

[junedchhipa]

Thanks for the detailed explanation.

When the data is appended, the SVG line paths gets extended to an unreasonable width if xaxis.range is provided. This puts a lot of stress on the animation as animating a line of 10000px would be very intense. Hence, I was resetting data every 60 seconds.

To overcome this situation, I tried an alternative way of keeping the line path short by not removing the datapoint but changing it to the first date of the range. That way, the animation is still smooth and we don't have to worry about resetting. If in case, the data becomes very large later on, we can reset the data completely at every 5 or 10 minutes.

[junedchhipa]

The new method of resetting the previous data-points can be accessed at https://github.com/apexcharts/apexcharts.js/blob/master/samples/vanilla-js/line/realtime.html#L63

[mcrapts]

Thanks for this update. Your new solution makes the realtime chart more workable, but it still requires to keep keep datapoints in memory that are not visible anymore.

[junedchhipa]

Yes. That's why I suggested doing a reset at every 5 or 10 minutes.
Unfortunately, there's no other workaround yet.

[franck34]

Unfortunately, there's no other workaround yet.

@junedchhipa perhaps you can give some leads to investigate ?

[philippks]

Old issue, but I leave a comment here, which maybe helps others.

When running the realtime graph for multiple minutes, it started to getting slow. So I wanted to clean it every 60s. This lead to strange animations, when I removed the old data (which is not visible anymore) from the series.

As a workaround, I simply disable the animation temporarily.

dispatch({ type: 'disableAnimations' });
dispatch({ type: 'cleanupGraph' });
dispatch({ type: 'updateGraph' });

setTimeout(() => {
    dispatch({ type: 'enableAnimations' });
}, 500);

This leads to a short flickering every 60s. What is ok for me.

[slalli]

We are having about the same problem and no turnaround seems to work.
Our company may be willing to fund fixing this bug. Please get in touch with me at stefano@yottadb.com

Than you !
Stef