Resize: width > 0, height = 0. Use aspectRatio 2 (#8632)

diff --git a/src/helpers/helpers.dom.js b/src/helpers/helpers.dom.js
index 05e1aa6a499f8ff0d46cedbd2b8d60e540d12073..db0fe3fc805b8aa2d71ea06a5962cb14083448de 100644 (file)
--- a/src/helpers/helpers.dom.js
+++ b/src/helpers/helpers.dom.js
@@ -137,9 +137,16 @@ export function getMaximumSize(canvas, bbWidth, bbHeight, aspectRatio) {
   }
   width = Math.max(0, width - margins.width);
   height = Math.max(0, aspectRatio ? Math.floor(width / aspectRatio) : height - margins.height);
+  width = round1(Math.min(width, maxWidth, containerSize.maxWidth));
+  height = round1(Math.min(height, maxHeight, containerSize.maxHeight));
+  if (width && !height) {
+    // https://github.com/chartjs/Chart.js/issues/4659
+    // If the canvas has width, but no height, default to aspectRatio of 2 (canvas default)
+    height = round1(width / 2);
+  }
   return {
-    width: round1(Math.min(width, maxWidth, containerSize.maxWidth)),
-    height: round1(Math.min(height, maxHeight, containerSize.maxHeight))
+    width,
+    height
   };
 }
 

diff --git a/test/specs/core.controller.tests.js b/test/specs/core.controller.tests.js
index 8d95f90ac2b40a0bfa2695d5a9c77e8376c6f0d5..9be597bf3ca0ba86d735da82e3c0d7a25a46f3fe 100644 (file)
--- a/test/specs/core.controller.tests.js
+++ b/test/specs/core.controller.tests.js
@@ -771,6 +771,34 @@ describe('Chart', function() {
       wrapper.style.display = 'block';
     });
 
+    it('should resize the canvas when the wrapper has display style changes from "none" to "block"', function(done) {
+      // https://github.com/chartjs/Chart.js/issues/4659
+      var chart = acquireChart({
+        options: {
+          responsive: true,
+          maintainAspectRatio: false
+        }
+      }, {
+        canvas: {
+          style: ''
+        },
+        wrapper: {
+          style: 'display: none; max-width: 600px; max-height: 400px;'
+        }
+      });
+
+      var wrapper = chart.canvas.parentNode;
+      waitForResize(chart, function() {
+        expect(chart).toBeChartOfSize({
+          dw: 600, dh: 300,
+          rw: 600, rh: 300,
+        });
+
+        done();
+      });
+      wrapper.style.display = 'block';
+    });
+
     // https://github.com/chartjs/Chart.js/issues/5485
     it('should resize the canvas when the devicePixelRatio changes', function(done) {
       var chart = acquireChart({