Chart.js: Scaling indefinitely when resolution changes

[moda20]

Expected Behavior

proper scaling and responsiveness when resolution changes

Current Behavior

The chart keeps scaling, getting bigger and bigger by the second

Steps to Reproduce (for bugs)

1. Create a chart with responsive : true and maintainAspectRatio : false
2. Open console
3. Play with the resolution and see the size get bigger and bigger
   4.

Environment

• Chart.js version: Latest
• Browser name and version: chrome latest

[simonbrunel]

Please share a test case that reproduces your issue.

[glenn-barnett]

I've seen this as well. My situation is in the context of Bootstrap, but I've been able to repro it without bootstrap with the following CSS and element hierarchy:

```

```

To reproduce, in Chrome, zoom the window to 90% via Cmd-Minus

[glenn-barnett]

@simonbrunel was wondering if you could please remove the 'needs test case' label from this issue?

[simonbrunel]

@glenn-barnett sure (and thanks), here is the associated codepen: https://codepen.io/anon/pen/OrwKRO

[glenn-barnett]

Thank you @simonbrunel ! I'll make a codepen next time.

[glenn-barnett]

Note: found that putting table-layout: fixed on the display:table element seems to prevent the issue.

[moda20]

I did find a workaround by simply fixing the heigh of the canvas.
Like @glenn-barnett said, it happens when used with bootstrap (in my case it's with Medtronic portlets, which uses bootstrap)

[reisdev]

+1. Same problem here, and I haven't found any propper solution.

[reisdev]

Similar issue: #5805

[BenjaminSchilller]

All found workarounds didn't work with one exception: set canvas height + weight directly via style and set the chart option responsive: true; but __don't__ set maintainAspectRatio to false!

Sample for canvas and chart options:
<canvas id="events" style="height: 80px; width: 400px;"></canvas>
options: { responsive: true, ... }

__In this case height and width are not used as real, but as ratio!__ It's fully responsive for all sizes and widths. In my case I've set height dynamically in PHP dependent on count of result elements:
<canvas id="userEvents" style="height: <?php echo $height?>px; width: 400px;"></canvas>