Chart not resized when changing window size in height only #3105

JBildstein · 2016-08-07T00:05:39Z

As per title, if I have a responsive chart (with maintainAspectRatio: false) the chart is not resized if I change the window size in height only. As soon as I change the window width it adjust itself correctly.

In this example it seems to resize correctly if the window size is getting bigger but not when it's getting smaller (or only rarely or sometimes when changing very fast).
In my real app it doesn't resize in either way but I can't reproduce it into a small example.

I couldn't get this behavior on jsfiddle or codepen but here is an example html page:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Chart Test</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
        }
    </style>
</head>
<body>
    <div style="width:100%;height:60%">
      <canvas id="myChart" style="width:100%;height:100%"></canvas>
    </div>
    <div style="background-color:#ddd;height:40%;">
      Lower Container
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>
    <script>
        window.onload = function() {
            var ctx = document.getElementById("myChart").getContext("2d");
            var data = {
              labels: ["A", "B", "C", "D", "E", "F", "G"],
              datasets: [{
                label: "Test",
                data: [65, 59, 80, 81, 56, 55, 40],
              }]
            };
            var myLineChart = new Chart(ctx, {
              type: 'line',
              data: data,
              options: {
                maintainAspectRatio: false
              }
            });
        }
    </script>
</body>
</html>

etimberg · 2016-08-07T21:05:53Z

I played around with this. I think the problem is the way that there is no good way to know when the overall window has gotten smaller in this case. That's because the height of the page is determined by the content so when the height of the window shrinks, the browser simply makes the page scrollable to the user. To the content, however, there is no change which is why our resize listener never fires. When the width changes, the content is changed and our resize listener fires trigger the full update to the real size.

AlexeiDarmin · 2016-08-09T12:26:36Z

I agree with @etimberg that there's no easy way of knowing height changes so your best bet is to set up an event listener on the window to manually call chart.resize() if the height of the window changes.

I recently did it this way and it works like a charm. Here's your fiddle with it. https://jsfiddle.net/wbjkgmta/

window.addEventListener('resize', function () { myLineChart.resize() })

Note this implementation resizes twice so could be optimized to only execute if width isn't changing.

JBildstein · 2016-08-10T20:05:46Z

I understand, thanks for the feedback!
The solution from @AlexDar works very well for my case and I'll use it, thank you Alex.
I have added a check to see if the window height has changed since the last event and only then update the chart.

simonbrunel · 2016-08-26T20:19:25Z

@JBildstein in your example, I think the issue is that the hidden iframe (used to detect size changes) doesn't fit vertically. Can you try to add this to your stylesheet:

.chartjs-hidden-iframe {
    height: 100% !important;
}

However, I'm not sure about side effects for having the iframe with height: 100% since we don't control the parent container.

simonbrunel · 2016-09-11T18:57:53Z

I updated the fiddle to add the css rule above and remove the resize listener. It works pretty well so was thinking that we should change the height of the iframe for 100%. @etimberg, can you see any issue with that? is there any reason why the height was 0 since the beginning?

etimberg · 2016-09-12T13:37:48Z

@simonbrunel I can't remember why it was 0. We should be able to set to 100% without issues but we should unit test it.

Ensure that the hidden iframe is stretched vertically in order to detect height changes. Remove the classlist check/call since it was incorrectly spelled (should be classList), but also useless since the iframe has just been generated. Also remove the callback check: addResizeListener should never be called w/o a valid callback.

JBildstein · 2016-09-20T10:01:15Z

@simonbrunel sorry for taking so long (different project came in between). I tried it and it works perfectly.
I'll use your solution now instead of the size event.

Ensure that the hidden iframe is stretched vertically in order to detect height changes. Remove the classlist check/call since it was incorrectly spelled (should be classList), but also useless since the iframe has just been generated. Also remove the callback check: addResizeListener should never be called w/o a valid callback.

simonbrunel · 2016-09-23T15:50:21Z

Fixed by PR #3326, will be released in 2.4 :)

Ensure that the hidden iframe is stretched vertically in order to detect height changes. Remove the classlist check/call since it was incorrectly spelled (should be classList), but also useless since the iframe has just been generated. Also remove the callback check: addResizeListener should never be called w/o a valid callback.

kkureli · 2023-04-09T10:27:04Z

Hi, is there any way to maintain aspect ratio and make chart vertically responsive at the same time?

ankit-mishra-01 · 2023-08-31T20:05:15Z

since js is manipulating the width and height of the canvas you need to define 100 % width and height in your custom css to prevent manipulation

etimberg added type: bug Priority: p2 help wanted labels Aug 7, 2016

simonbrunel mentioned this issue Sep 12, 2016

iframe may not resize after the container. #3152

Closed

simonbrunel self-assigned this Sep 17, 2016

simonbrunel added this to the Version 2.4 milestone Sep 22, 2016

simonbrunel closed this as completed Sep 23, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Chart not resized when changing window size in height only #3105

Chart not resized when changing window size in height only #3105

JBildstein commented Aug 7, 2016

etimberg commented Aug 7, 2016

AlexeiDarmin commented Aug 9, 2016

JBildstein commented Aug 10, 2016

simonbrunel commented Aug 26, 2016 •

edited

Loading

simonbrunel commented Sep 11, 2016

etimberg commented Sep 12, 2016

JBildstein commented Sep 20, 2016

simonbrunel commented Sep 23, 2016

kkureli commented Apr 9, 2023

ankit-mishra-01 commented Aug 31, 2023 •

edited

Loading

Chart not resized when changing window size in height only #3105

Chart not resized when changing window size in height only #3105

Comments

JBildstein commented Aug 7, 2016

etimberg commented Aug 7, 2016

AlexeiDarmin commented Aug 9, 2016

JBildstein commented Aug 10, 2016

simonbrunel commented Aug 26, 2016 • edited Loading

simonbrunel commented Sep 11, 2016

etimberg commented Sep 12, 2016

JBildstein commented Sep 20, 2016

simonbrunel commented Sep 23, 2016

kkureli commented Apr 9, 2023

ankit-mishra-01 commented Aug 31, 2023 • edited Loading

simonbrunel commented Aug 26, 2016 •

edited

Loading

ankit-mishra-01 commented Aug 31, 2023 •

edited

Loading