Chart.js: responsive behavior not working

[mokhosh]

I'm using two line charts along side in a bootstrap row, each inside a col.

Expected Behavior

It should snap back to normal size when the browser maximizes

Current Behavior

If the browser window is narrowed the canvas fills the row but when you maximize the window it doesn't go back to how it was

Steps to Reproduce (for bugs)

1. put two canvases in to cols:

<div class="row">
        <div class="col"><canvas id="language-chart"></canvas></div>
        <div class="col"><canvas id="subject-chart"></canvas></div>
</div>

1. initialize 2 line charts like the docs tells you to
2. load the page in a maximized browser, everything's normal
3. change the width of the browser to about the tablet width
4. go back to maximized

Environment

• Chart.js version: 2.7.2
• Browser name and version: Opera 51, Firefox latest

[etimberg]

@mokhosh is it possible to put together a fiddle that reproduces this issue?

[mokhosh]

@etimberg sure:
a fiddle that reproduces this issue

as you can see the charts are along side each other as they should be. but when you try to resize the rendering area they are stacked on top of each other, which is still normal. but you can't get them to go back to the first condition no matter how big you make that area.

[youyouliangshao]

I think its a responsive issue,try to moniter a window.resize function to redraw the chart

[etimberg]

@mokhosh it looks like it's working for me (Firefox on OSX). I tried resizing the entire browser and the charts resize as expected.

[mokhosh]

well, that's really good. can we do something about windows 10 as well?

[simonbrunel]

That's an issue with flexbox (your .col class), you need to explicitly set .col { min-height: 0 }, see #4156 (comment) and this fiddle.