[Bug]: Massive memory leak with maintainAspectRatio with bar graphs

[lkarvec]

trafficstars

Would you like to work on a fix?

• [ ] Check this if you would like to implement a PR, we are more than happy to help you go through the process.

Current and expected behavior

Current: upon setting maintainAspectRatio to false on a bar graph so I can manually set height (per your docs suggestion) and placing another prebuilt component next to it (I've used different ones like buttons, query builders, cards), the page renders the desired size, and then starts infinitely expanding the height of the graph, and using about 1-2GB of ram extra for every extra second it resizes.

Sometimes it slows down or stops resizing, and when I hover over one of the bars on the graph, and the tool tip appears; while the tooltip is visible, it continues to expand size and memory usage.

It does NOT do this when I just have the graph in a card on the page, but the moment I add something else to the page, it does this. It also does NOT do this when maintainAspectRatio is true. It also does NOT do this when I slap some sort of container, like a react-bootstrap grid, around it.

Expected: Probably not a huge memory leak, and probably not active resizing without setting it

Attached is a fork of your test repo where I pretty much just add a bootstrap button, the height for the graph, and the option for the aspect ratio.

Reproduction

https://codesandbox.io/s/async-star-dfvloy?file=/App.tsx

chart.js version

4.3.0

react-chartjs-2 version

5.2.0

Possible solution

No response

[lkarvec]

Seems like the issue is about needing to wrap the graph in a container. The documentation on the site doesn't reflect this solution, especially on the FAQ, where it advises me to toss the aspect ratio. Shouldn't the prebuilt graphs be handling this container on their own?