search

apexcharts / apexcharts.js

📊 Interactive JavaScript Charts built on SVG
https://apexcharts.com
MIT License
14.27k stars 1.3k forks source link

3.49 causes issues with animation #4463

Open VeloAddict opened 4 months ago

VeloAddict commented 4 months ago

Here is an example:

https://codepen.io/velobarplus/pen/NWVWRNB

rosco54 commented 4 months ago

Looking at this.

rosco54 commented 4 months ago

Why you're seeing this:

If you look closely when running these examples under earlier versions you can see that the same effect occurs but only between the new datapoint and the preceding datapoint. The same problem is there but on a smaller scale.

In order to fix several gradient fill issues that produced permanently visible discontinuities in both area and line fills, it was necessary to compute a single enclosing path for each contiguous segment of a series, rather than multiple paths that butt together (one for at each datapoint in the series). The underlying SVG requires this in order to work correctly. For complete series with no missing data this results in a single enclosing path that includes all datapoints, hence you see the whole chart being reanimated, not just the last datapoint.

One conventional approach to fix this (in code) IMO would be:

  1. the fill animation to be disabled after the initial rendering,
  2. the chart to be redrawn after the new datapoint is appended but in a window that is one datapoint wider than the visible grid ( the new data is initially off the grid),
  3. the chart is then scrolled right to left to bring the new datapoint into view,
  4. the oldest datapoint to then be dropped,
  5. repeat from (2).
jherman commented 4 months ago

Just an FYI for others that reach this. If you are in need of a quick fix, reverting back to v3.48.0 works.

See codepen here: https://codepen.io/jh_codepen/pen/dyEppwg

rosco54 commented 4 months ago

Or consider disabling animations, which may be acceptable where there are a larger number of data points displayed/smaller scroll steps.

On Sat, 25 May 2024, 5:43 am jherman, @.***> wrote:

Just an FYI for others that reach this. If you are in need of a quick fix, reverting back to v3.48.0 works.

See codepen here: https://codepen.io/jh_codepen/pen/dyEppwg

— Reply to this email directly, view it on GitHub https://github.com/apexcharts/apexcharts.js/issues/4463#issuecomment-2130249945, or unsubscribe https://github.com/notifications/unsubscribe-auth/BGBUF47P5U5CGAVE65W26XDZD6J5ZAVCNFSM6AAAAABHSE2E32VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMZQGI2DSOJUGU . You are receiving this because you commented.Message ID: @.***>