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

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
   };
 }
 

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({