[BUG] Responsive canvas grows indefinitely in a container sized in %

[developMediaSoft]

When JavaScript resizes the canvas of a responsive chart to the canvas's relatively sized container, this will cause the container to be resized as well which will, in turn, trigger another canvas resizing and create an infinite loop where the chart will grow indefinitely (at least vertically).

Expected Behavior

The canvas fits the container without expanding it

Current Behavior

Canvas and its container grow indefinitely: https://codepen.io/bugmenot/pen/EdBogW

Possible Solution

Set the canvas's box-sizing to border-boxl. This will include borders/padding in the new canvas size and prevent the canvas from resizing the container: https://codepen.io/bugmenot/pen/oarqGz

Steps to Reproduce

Adopt the example from http://www.chartjs.org/docs/latest/general/responsive.html#important-note simply changing viewport units to percentages

Context

I'm actually trying to isolate another problem. This one I've just encountered trying to create a test case forking the example mentioned above.

Environment

• Chart.js version: 2.5.0, reproducible in 2.7.3
• Browser name and version: Firefox Quantum 62.0.3 (64-bit)

[jwillmer]

I also was trying to isolate a different problem and found the same bug. My code show the problem with horizontal expansion: https://codepen.io/jwillmer/pen/qQzOzQ/

[Evertvdw]

I'm running into this problem to, I'm always having fights with the charts to get them sized properly.
Using vw/vh is not a good option for me.

You can reproduce the problem here: https://codepen.io/chartjs/pen/YVWZbz

Change height to %.

[reisdev]

+1

[arkkanoid]

+1

[timmoti]

+1

[halves-openbox]

I did encounter this bug while building my charts with Bootstrap and disabling mainAspectRatio in options. Turns out that (in my case) inserting another element along with the canvas inside a container caused the issue.

When the issue occurred:

<div>
    <strong>graph title<strong>
    <canvas>--chart--</canvas>
</div>

My solution:

<div>
   <strong>graph title<strong>
       <div>
           <canvas>--chart--</canvas>
      </div>
</div>

[DanyDes]

Well I know that the issue is old but even so I struggled to find the fix.
First of all, the responsive attribute didn't help me because by default is set true we don't need to change it, another thing to take into account is that maintainAspectRatio has to be set to false in order to get a responsive view.
As mentioned above, the canvas element has to be the unique element inside the div parent and you have to set de size - in my case only the height - in the parent style html attribute.
With those settings the canvas element is responsive and doesn't grow and expands indefinitely.

Turns out that I am working with vue-chartjs and was a little bit different from the documentation.
I hope it helps.

[laurenceks]

@DanyDes setting the container div's height directly in the style attribute and removing all classes fixed this for me (using old 2.7.1), thanks

[JStudent97]

try and set max-height for the containing div (even in classes or whatever you want). This worked for me; the increasing stopped.
I use: "react-chartjs-2": "4.1.0", "chart.js": "3.7.1"