Apexcharts.js: Keep the same zoom level on Realtime chart

[bencultureinfo]

Dear all,

I'm continuing to develop with your very nice library but now I have a new issue.
I have a realtime chart with lot of data and I need to zoom on last values and keep the live.
Does it possible to do that ? Or to bypass my problem ?

(https://cloud.le-vert.net/s/17mseoQnSN7yhTl)

(You have to wait the end of the video to see the chart refresh)

Thanks for your help and thanks for apexcharts !

Benoit.

[luispestana]

Hi, i'm kinda on the same problem.

In fact, all the actions made in the chart are lost, for example toggledSeries, that come back active when there is update of the series, or an annotation that has been disabled, comes back to be enabled when we update the series.
How to update the series without these interactions being lost?

[gmatkowski]

Yes that would be really nice to know how to deal with this situation

[paparent]

Might be related (Sorry, I can't see the video anymore).

I'm using the sample Brush Chart (https://apexcharts.com/javascript-chart-demos/line-charts/brush-chart/). I adjust the selection the way I want it. And at an interval, I add new data using .appendData() to both charts. Unfortunately the selection reset back to the end of the charts :(

Thanks !

[sneko]

Hey, after almost a year I would like to know if you guys succeeded in solving this issue?

Thank you,

[MichaelPluessBluesky]

I found a hack that solved this issue in my use-case: Hiding the chart by setting the color to transparent before the update and resetting the colors after the update. In my case, this prevents the nauseating zooming action that occurs when updating the series data.

This might look something like this:

// hiding the chart. otherwise, ugly jumping animation will occur
await this.chart.updateOptions( { colors: ['rgba(0,0,0,0)'] } );

// the actual update
await this.chart.updateSeries(...);
await this.chart.zoomX(...); // zooming back to the position where we just previously were

// showing the chart again
await this.chart.updateOptions( { colors: ['var(--lumo-primary-color)'] } );

[EnzoKilm]

Hello there,

Little up for this problem which I didn't solved. Anyone has a solution ?