apexcharts / apexcharts.js

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

3.49.0 breaks area chart series toggling for series with larger numbers of values #4488

Closed mrash closed 4 months ago

mrash commented 4 months ago

Description

In 3.49.0, for area charts with multiple series with larger numbers of values (say, about 3,000), series toggling is broken - or, at least, highly unresponsive. See the attached .html example that reproduces this issue. The initial rendering of the graph is fine in 3.49.0 - only toggling a series to hide it via a mouse click has the problem. Note that 3.48.0 does not have this problem, and was likely introduced in commit 7f04fa31. For 3.48.0, series toggling is fast even for area charts with multiple large series. If this is related to linearscale() assumptions, would it be be possible to add a new attribute to allow the user to select the old behavior?

Steps to Reproduce

  1. Load the 'ap_issue.html' file from this gist against ApexChart 3.49.0 (note the '../../apexcharts/dist/apexcharts.js' path may need to be changed for your system).
  2. The chart should load showing three series: 'vals', 'moving_avg_100D', and 'exp_moving_avg_100D'.
  3. Select the 'vals' series in the legend and mouse click to try and toggle/hide it.
  4. The browser tab will become unresponsive.
  5. Switching to ApexCharts 3.48.0 or any prior version will not exhibit the above, and series toggling is fast and responsive.

Expected Behavior

Series toggling should be fast and responsive as seen in 3.48.0 and prior versions.

Actual Behavior

The browser tab becomes unresponsive (see screenshot below).

Screenshots

Here is the complete rendered page that includes the three series:

Full chart

When trying to toggle/hide the 'vals' series, mouse over 'vals' (which shows just the 'vals' series without the others), and then upon mouse click to toggle 'vals' the browser tab become unresponsive:

Screenshot 2024-05-25 at 2 34 21 PM

Under 3.48.0, here is what should be shown after the mouse click:

Screenshot 2024-05-25 at 2 35 12 PM

Reproduction Link

See the 'ap_issue.html' file from this gist - (note the '../../apexcharts/dist/apexcharts.js' path may need to be changed for your system to point to the correct path for ApexCharts).

rosco54 commented 4 months ago

@junedchhipa I'll look into this.

@mrash @junedchhipa I confirm this issue in 3.49.0 using ap_issue.html although it appears to be as expected in 3.49.1. Would you be able to confirm that 3.49.1 performance is no worse than 3.48.0?

@mrash @junedchhipa Apologies, it is the current main branch revision in the repository that I believe works. 3.49.1 as released does not.

@junedchhipa I'm fairly certain that PR #4483 is the commit that fixed this issue.

mrash commented 4 months ago

@rosco54 Thanks, and confirmed that 3.49.1 has the issue. Also, I tried HEAD from the main branch, and the issue appears to be there too (same behavior as reported above).

rosco54 commented 4 months ago

Please check the build process. I find that I often need to kill and restart npm run dev to get a build that reflects the src following a branch switch or checkout.

I get the following timings using HEAD (idle time removed):

Initial Load

Initial_load

Collapse Vals

Collapse_vals

mrash commented 4 months ago

Thanks @rosco54, that helps. It does appear that main HEAD has fixed the issue (I wasn't running the 'npm run dev' step before, but I see that is necessary now).

rosco54 commented 4 months ago

@mrash Thanks for confirming. @junedchhipa This issue can be closed as fixed by #4483

mrash commented 4 months ago

Thanks for the fast turn around time @rosco54. I look forward to the next release.