chartjs / chartjs/Chart.js

Chart grows forever when maintainAspectRatio is false

Open
#11,821 3 comments 0 reactions 0 assignees View on GitHub
type: bug
Dominant language
JavaScript
Stars
67.7k
Forks
11.9k
Avg merge
7h 39m
Merged PRs (30d)
5

Description

### 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:
![maintainAspectRatio-bug2](https://github.com/chartjs/Chart.js/assets/17402311/84aef69e-f5c3-44c4-932d-0a5b6cc768a5)

### 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_

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.