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.
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:
Expected behavior
I can turn
maintainAspectRatiooff 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
maintainAspectRatioto 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
maintainAspectRatioset to false and no max height set: https://codepen.io/teodorachiosa/pen/YzbbGLNLink for
maintainAspectRatioset to false and max height set on the wrapper element of the canvas: https://codepen.io/teodorachiosa/pen/XWwQPqWThe workaround I'll be using for now will be setting a max height on the wrapper, but this behavior for
maintainAspectRatioseems 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