Fix stacked box dimension calculation with weights (#9394)

* Fix stacked box dimension calculation with weights

* Fix typo in filename

src/core/core.layouts.js

@@ -223,9 +223,9 @@ function placeBoxes(boxes, chartArea, params, stacks) {
   for (const layout of boxes) {
     const box = layout.box;
     const stack = stacks[layout.stack] || {count: 1, placed: 0, weight: 1};
-    const weight = (stack.weight * layout.stackWeight) || 1;
+    const weight = (layout.stackWeight / stack.weight) || 1;
     if (layout.horizontal) {
-      const width = chartArea.w / weight;
+      const width = chartArea.w * weight;
       const height = stack.size || box.height;
       if (defined(stack.start)) {
         y = stack.start;
@@ -239,7 +239,7 @@ function placeBoxes(boxes, chartArea, params, stacks) {
       stack.placed += width;
       y = box.bottom;
     } else {
-      const height = chartArea.h / weight;
+      const height = chartArea.h * weight;
       const width = stack.size || box.width;
       if (defined(stack.start)) {
         x = stack.start;

test/fixtures/core.layouts/stacked-boxes-with-weight.js

@@ -0,0 +1,112 @@
+module.exports = {
+  config: {
+    type: 'line',
+    data: {
+      datasets: [
+        {data: [{x: 1, y: 1}, {x: 2, y: 2}, {x: 3, y: 3}], borderColor: 'red'},
+        {data: [{x: 1, y: 1}, {x: 2, y: 2}, {x: 3, y: 3}], yAxisID: 'y1', xAxisID: 'x1', borderColor: 'green'},
+        {data: [{x: 1, y: 1}, {x: 2, y: 2}, {x: 3, y: 3}], yAxisID: 'y2', xAxisID: 'x2', borderColor: 'blue'},
+      ],
+      labels: ['tick1', 'tick2', 'tick3']
+    },
+    options: {
+      plugins: false,
+      scales: {
+        x: {
+          type: 'linear',
+          position: 'bottom',
+          stack: '1',
+          stackWeight: 2,
+          offset: true,
+          bounds: 'data',
+          grid: {
+            borderColor: 'red'
+          },
+          ticks: {
+            autoSkip: false,
+            maxRotation: 0,
+            count: 3
+          }
+        },
+        x1: {
+          type: 'linear',
+          position: 'bottom',
+          stack: '1',
+          stackWeight: 2,
+          offset: true,
+          bounds: 'data',
+          grid: {
+            borderColor: 'green'
+          },
+          ticks: {
+            autoSkip: false,
+            maxRotation: 0,
+            count: 3
+          }
+        },
+        x2: {
+          type: 'linear',
+          position: 'bottom',
+          stack: '1',
+          stackWeight: 6,
+          offset: true,
+          bounds: 'data',
+          grid: {
+            borderColor: 'blue'
+          },
+          ticks: {
+            autoSkip: false,
+            maxRotation: 0,
+            count: 3
+          }
+        },
+        y: {
+          type: 'linear',
+          position: 'left',
+          stack: '1',
+          stackWeight: 2,
+          offset: true,
+          grid: {
+            borderColor: 'red'
+          },
+          ticks: {
+            precision: 0
+          }
+        },
+        y1: {
+          type: 'linear',
+          position: 'left',
+          stack: '1',
+          offset: true,
+          stackWeight: 2,
+          grid: {
+            borderColor: 'green'
+          },
+          ticks: {
+            precision: 0
+          }
+        },
+        y2: {
+          type: 'linear',
+          position: 'left',
+          stack: '1',
+          stackWeight: 3,
+          offset: true,
+          grid: {
+            borderColor: 'blue'
+          },
+          ticks: {
+            precision: 0
+          }
+        }
+      }
+    }
+  },
+  options: {
+    spriteText: true,
+    canvas: {
+      height: 384,
+      width: 384
+    }
+  }
+};