Merge pull request #6094 from plotly/fix6089-group-height-in-row

Fix vertical spacing of legend items in horizontal mode

Author: archmoj

draftlogs/6094_fix.md

@@ -0,0 +1 @@
+ - Fix vertical spacing of legend items in horizontal mode [[#6094](https://github.com/plotly/plotly.js/pull/6094)]

src/components/legend/draw.js

@@ -714,7 +714,6 @@ function computeLegendDimensions(gd, groups, traces, legendObj) {
                     offsetY += h;
                     maxWidthInGroup = Math.max(maxWidthInGroup, textGap + w);
                 });
-                maxGroupHeightInRow = Math.max(maxGroupHeightInRow, offsetY);
 
                 var next = maxWidthInGroup + itemGap;
 
@@ -730,6 +729,8 @@ function computeLegendDimensions(gd, groups, traces, legendObj) {
                     groupOffsetX = 0;
                     groupOffsetY += maxGroupHeightInRow + traceGroupGap;
                     maxGroupHeightInRow = offsetY;
+                } else {
+                    maxGroupHeightInRow = Math.max(maxGroupHeightInRow, offsetY);
                 }
 
                 Drawing.setTranslate(this, groupOffsetX, groupOffsetY);

test/image/baselines/z-legend-row-group-height.png

@@ -0,0 +1,32 @@
+{
+  "data": [
+    {
+      "legendgroup": "A",
+      "name": "Long label in group A",
+      "y": [1, 2, 3, 4]
+    },
+    {
+      "legendgroup": "B",
+      "name": "b1",
+      "y": [2, 3, 4, 1]
+    },
+    {
+      "legendgroup": "B",
+      "name": "Very long label in another group",
+      "y": [3, 4, 1, 2]
+    },
+    {
+      "legendgroup": "B",
+      "name": "b3",
+      "y": [4, 1, 2, 3]
+    }
+  ],
+  "layout": {
+    "paper_bgcolor": "lightblue",
+    "height": 350,
+    "width": 350,
+    "legend": {
+      "orientation": "h"
+    }
+  }
+}