Responsiveness does not play nice with Bootstrap layouts

[jasonpolites]

Expected Behavior

Rendering of charts in the context of a Bootstrap row/column layout should behave the same as standard HTML components

Current Behavior

When using a Bootstrap row/column layout, resizing the browser causes layout which changes if you refresh. For example a 2x2 grid containing charts will render as a grid on initial load, but resizing down causes charts to render in a stack. Refreshing the browser at this moment will result in the 2x2 grid being well-formed again. Ideally this should be consistent (i.e. if the layout would be stable at a given browser window size, regardless if it was a result of a resize or an initial load/refresh at that window size.

Possible Solution

Steps to Reproduce (for bugs)

https://jsfiddle.net/456v1mhj/1/

Context

It seems difficult (impossible?) to create a grid layout of charts using Chart.js with Bootstrap without having unclear or unpredictable behavior on browser resize.

Environment

• Chart.js version: https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js
• Browser name and version: Chrome on Mac (Version 72.0.3626.121)
• Link to your project:https://jsfiddle.net/456v1mhj/1/

[kurkle]

Not sure why that happens, but a simple max-width: 50% fixes it: https://jsfiddle.net/pgyawcxf/

[simonbrunel]

Isn't the same issue as #4156 (comment)?

[simonbrunel]

Fixed by setting min-width: 0; on the canvas parent container (jsfiddle)

[jasonpolites]

Um.. is that really "fixed". From what I can tell that disables the responsive behavior entirely. I think for alternate devices (e.g. mobile) you do want the charts to stack. The issue is that the display seems to prematurely stack and not be consistent on larger screens (e.g. desktop)

[simonbrunel]

@jasonpolites you are right, I didn't take in account the breaking point for mobile.

[etimberg]

Done in #7104