Only consider visible vertical boxes in layout (#8483)

src/core/core.layouts.js

@@ -343,13 +343,16 @@ export default {
     // |----------------------------------------------------|
     //
 
+    const visibleVerticalBoxCount = verticalBoxes.reduce((total, wrap) =>
+      wrap.box.options && wrap.box.options.display === false ? total : total + 1, 0);
+
     const params = Object.freeze({
       outerWidth: width,
       outerHeight: height,
       padding,
       availableWidth,
       availableHeight,
-      vBoxMaxWidth: availableWidth / 2 / verticalBoxes.length,
+      vBoxMaxWidth: availableWidth / 2 / visibleVerticalBoxCount,
       hBoxMaxHeight: availableHeight / 2
     });
     const chartArea = Object.assign({

test/fixtures/core.layouts/hidden-vertical-boxes.js

@@ -0,0 +1,62 @@
+module.exports = {
+  config: {
+    type: 'line',
+    data: {
+      datasets: [
+        {data: [10, 5, 0, 25, 78, -10]}
+      ],
+      labels: ['tick1', 'tick2', 'tick3', 'tick4', 'tick5', '']
+    },
+    options: {
+      plugins: {
+        legend: false
+      },
+      scales: {
+        x: {
+          display: false
+        },
+        y: {
+          type: 'linear',
+          position: 'left',
+          ticks: {
+            callback: function(value) {
+              return value + ' very long unit!';
+            },
+          }
+        },
+        y1: {
+          type: 'linear',
+          position: 'left',
+          display: false
+        },
+        y2: {
+          type: 'linear',
+          position: 'left',
+          display: false
+        },
+        y3: {
+          type: 'linear',
+          position: 'left',
+          display: false
+        },
+        y4: {
+          type: 'linear',
+          position: 'left',
+          display: false
+        },
+        y5: {
+          type: 'linear',
+          position: 'left',
+          display: false
+        }
+      }
+    }
+  },
+  options: {
+    spriteText: true,
+    canvas: {
+      height: 256,
+      width: 256
+    }
+  }
+};