[Bug]: Massive memory leak with 'maintainAspectRatio:false' with bar graphs (React-ChartJS-2)

[lkarvec]

Expected behavior

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.

Current 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.

Reproducible sample

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

Optional extra steps/info to reproduce

reactchartjs/react-chartjs-2#1168 is the bug form I filled over there.

Possible solution

No response

Context

No response

chart.js version

4.3.0

Browser name and version

Chrome 113.0.5672.93

Link to your project

No response

[LeeLenaleee]

You need to place the chart in its own container, if you do that it works fine:
https://codesandbox.io/s/cool-pine-wsbobv?file=/App.tsx

[lkarvec]

If this is the intended solution, we need to have this said somewhere. You shouldn't have anything like this in your library without documentation.

[etimberg]

https://www.chartjs.org/docs/latest/configuration/responsive.html mentions that chartjs need their own containers

[lkarvec]

not in the api section https://www.chartjs.org/docs/latest/api/interfaces/CoreChartOptions.html which is where I initially looked.
I am NOT trying to make a responsive chart. I am trying to make a single static sized chart. This is an issue specifically with the maintain aspect ratio flag. At the very least, it's also not documented to plop it in a container on that react-chartjs-2 section on https://react-chartjs-2.js.org/faq/maintain-aspect-ratio

[LeeLenaleee]

https://react-chartjs-2.js.org/faq/maintain-aspect-ratio is not under our maintenance, this is an external package. So for issues with the documentation there you will need to file an issue in this repository: https://github.com/reactchartjs/react-chartjs-2

Our documentation you linked is auto generated looking at it, it seems possible to add comments to it. I will look into it if I can add a note about this to it

[lkarvec]

I did file an issue over there with reactchartjs/react-chartjs-2#1168. Their contribution rules require I file an issue over here for any rendering issues.