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

[gregdan3]

Confirming I have this issue as well; if I stick the canvas in an element on its own, I actually get the opposite problem, where the canvas shrinks to height=0 then resets and does that again, indefinitely.

[krisato]

I faced same issue.

[coachnovak]

I have the same issue.

Edit: I just fixed it by wrapping the canvas into a div and making the div position absolute with inset 0.