Chart grows forever when maintainAspectRatio is false

[teodorachiosa]

Expected behavior

I can turn maintainAspectRatio off and the chart doesn't start growing forever in the page. There should be a limit from Chart.js and the client can then add other limits (in the form of height/max-height).

Current behavior

Setting maintainAspectRatio to false makes the chart grow forever in the page.

I managed to stop it from growing by setting a max-height on a wrapper element. Setting a max-height on the canvas didn't stop the growing.

This seems to happen when the canvas has sibling elements, which I need in my project.

In this very similar issue https://github.com/chartjs/Chart.js/issues/5805 [closed], someone suggested to remove the sibling elements: https://github.com/chartjs/Chart.js/issues/5805#issuecomment-893961074. But this causes another bug related to responsiveness, this one: https://github.com/chartjs/Chart.js/issues/11005 Relevant comment with explanation: https://github.com/chartjs/Chart.js/issues/11005#issuecomment-1433478026

Reproducible sample

https://codepen.io/teodorachiosa/pen/YzbbGLN Warning: Your browser might freeze when opening this example!

Optional extra steps/info to reproduce

No response

Possible solution

No response

Context

Reproduction link for maintainAspectRatio set to false and no max height set: https://codepen.io/teodorachiosa/pen/YzbbGLN

Link for maintainAspectRatio set to false and max height set on the wrapper element of the canvas: https://codepen.io/teodorachiosa/pen/XWwQPqW

The workaround I'll be using for now will be setting a max height on the wrapper, but this behavior for maintainAspectRatio seems pretty broken to me out of the box.

Edit: Even after setting the max height, the chart still grows a bit on mouse hover and the legend is cut off: Example from a project:

chart.js version

4.4.2 Also tested with 4.4.3

Browser name and version

Chrome 125.0.6422.147

Link to your project

No response