Chart.js: Chart not resized when changing window size in height only

Created on 7 Aug 2016 · 8Comments · Source: chartjs/Chart.js

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>

help wanted bug

Source

JBildstein

👍1

Most helpful comment

@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 on 26 Aug 2016

❤3 👍3

All 8 comments

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.

etimberg on 7 Aug 2016

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.

AlexeiDarmin on 9 Aug 2016

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.

JBildstein on 10 Aug 2016

@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 on 26 Aug 2016

❤3 👍3

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?

simonbrunel on 11 Sep 2016

@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.

etimberg on 12 Sep 2016

@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.

JBildstein on 20 Sep 2016

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

simonbrunel on 23 Sep 2016

👍1

Was this page helpful?

0 / 5 - 0 ratings