Performance issues for stacked bar charts as number of bars increase

[Kshitijde]

Description

Performance issues for stacked bar charts as the number of bars increase

After 20 bars, a subtle lag can be seen in the rendering of the graphs. This lag worsens as we scale further up. The use cases involved often require up to 40 or more bar charts and thus this is becoming a hindrance to the usability of the charts and affecting the user experience.

Steps to Reproduce

1. Create suitable data for stacked bar charts.
2. Plot around 30 - 40 bar charts in the stacked mode.
3. Plot 3 - 4 graphs to reproduce the issue.

Expected Behavior

Smooth rendering with no lag or performance issue

Actual Behavior

Subtle lag which becomes more noticeable as the data and number of bars scale

Reproduction Link

https://codesandbox.io/p/sandbox/react-basic-example-forked-c38d36

[urenpatelce]

We also faced this issue and the simple reason is the bad array structure which we have to pass N x N where for 30 size array only one value is used in entire array of size 30. If you simply convert this structure to JSON then it avoids unnecessary processing. Still 30*40 is not the big array size and something is wrong in apex charts itself and because of that the gprahs becomes laggy and it just makes the Javascript engine busy.

Thanks for creating the bug as we are also facing the similar issue.