Legend: fix layout padding handling (#9290)

src/core/core.layouts.js

@@ -200,7 +200,7 @@ function placeBoxes(boxes, chartArea, params) {
       box.left = x;
       box.right = x + box.width;
       box.top = box.fullSize ? userPadding.top : chartArea.top;
-      box.bottom = box.fullSize ? params.outerHeight - userPadding.right : chartArea.top + chartArea.h;
+      box.bottom = box.fullSize ? params.outerHeight - userPadding.bottom : chartArea.top + chartArea.h;
       box.height = box.bottom - box.top;
       x = box.right;
     }

src/plugins/plugin.legend.js

@@ -88,11 +88,11 @@ export class Legend extends Element {
 
     if (me.isHorizontal()) {
       me.width = me.maxWidth;
-      me.left = 0;
+      me.left = me._margins.left;
       me.right = me.width;
     } else {
       me.height = me.maxHeight;
-      me.top = 0;
+      me.top = me._margins.top;
       me.bottom = me.height;
     }
   }
@@ -199,29 +199,26 @@ export class Legend extends Element {
     let currentColHeight = 0;
 
     let left = 0;
-    let top = 0;
     let col = 0;
 
     me.legendItems.forEach((legendItem, i) => {
       const itemWidth = boxWidth + (fontSize / 2) + ctx.measureText(legendItem.text).width;
 
       // If too tall, go to new column
-      if (i > 0 && currentColHeight + fontSize + 2 * padding > heightLimit) {
+      if (i > 0 && currentColHeight + itemHeight + 2 * padding > heightLimit) {
         totalWidth += currentColWidth + padding;
         columnSizes.push({width: currentColWidth, height: currentColHeight}); // previous column size
         left += currentColWidth + padding;
         col++;
-        top = 0;
         currentColWidth = currentColHeight = 0;
       }
 
+      // Store the hitbox width and height here. Final position will be updated in `draw`
+      hitboxes[i] = {left, top: currentColHeight, col, width: itemWidth, height: itemHeight};
+
       // Get max width
       currentColWidth = Math.max(currentColWidth, itemWidth);
-      currentColHeight += fontSize + padding;
-
-      // Store the hitbox width and height here. Final position will be updated in `draw`
-      hitboxes[i] = {left, top, col, width: itemWidth, height: itemHeight};
-      top += itemHeight + padding;
+      currentColHeight += itemHeight + padding;
     });
 
     totalWidth += currentColWidth;

test/fixtures/plugin.legend/padding/2cols-with-padding.js

@@ -0,0 +1,35 @@
+module.exports = {
+  description: 'https://github.com/chartjs/Chart.js/issues/9278',
+  config: {
+    type: 'pie',
+    data: {
+      labels: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k'],
+      datasets: [{
+        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
+        backgroundColor: 'red'
+      }]
+    },
+    options: {
+      plugins: {
+        legend: {
+          position: 'left'
+        }
+      },
+      layout: {
+        padding: {
+          top: 50,
+          left: 30,
+          right: 30,
+          bottom: 50
+        }
+      }
+    }
+  },
+  options: {
+    spriteText: true,
+    canvas: {
+      width: 400,
+      height: 300
+    },
+  }
+};

test/fixtures/plugin.legend/padding/add-column.js

@@ -0,0 +1,39 @@
+module.exports = {
+  description: 'https://github.com/chartjs/Chart.js/issues/9278',
+  config: {
+    type: 'pie',
+    data: {
+      labels: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'],
+      datasets: [{
+        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+        backgroundColor: 'red'
+      }]
+    },
+    options: {
+      plugins: {
+        legend: {
+          position: 'left'
+        }
+      },
+      layout: {
+        padding: {
+          top: 55,
+          left: 30,
+          right: 30
+        }
+      }
+    }
+  },
+  options: {
+    spriteText: true,
+    canvas: {
+      width: 400,
+      height: 300
+    },
+    run(chart) {
+      chart.data.labels.push('k');
+      chart.data.datasets[0].data.push(11);
+      chart.update();
+    }
+  }
+};