Chart not resized when changing window size in height only

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>

Author: Fantashit

1 thought on “Chart not resized when changing window size in height only

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

Comments are closed.