Merge pull request #5996 from plotly/legend-dont-wrap-1st-col

Do not wrap (enter to first column) legend items if already on the first column

Author: archmoj

draftlogs/5996_fix.md

@@ -0,0 +1 @@
+ - Do not wrap legend items if already on the first column [[#5996](https://github.com/plotly/plotly.js/pull/5996)]

src/components/legend/draw.js

@@ -700,19 +700,28 @@ function computeLegendDimensions(gd, groups, traces, legendObj) {
                 var maxWidthInGroup = 0;
                 var offsetY = 0;
                 d3.select(this).selectAll('g.traces').each(function(d) {
+                    var w = d[0].width;
                     var h = d[0].height;
+
                     Drawing.setTranslate(this,
                         titleSize[0],
                         titleSize[1] + bw + itemGap + h / 2 + offsetY
                     );
                     offsetY += h;
-                    maxWidthInGroup = Math.max(maxWidthInGroup, textGap + d[0].width);
+                    maxWidthInGroup = Math.max(maxWidthInGroup, textGap + w);
                 });
                 maxGroupHeightInRow = Math.max(maxGroupHeightInRow, offsetY);
 
                 var next = maxWidthInGroup + itemGap;
 
-                if((next + bw + groupOffsetX) > legendObj._maxWidth) {
+                // horizontal_wrapping
+                if(
+                    // not on the first column already
+                    groupOffsetX > 0 &&
+
+                    // goes beyound limit
+                    next + bw + groupOffsetX > legendObj._maxWidth
+                ) {
                     maxRowWidth = Math.max(maxRowWidth, groupOffsetX);
                     groupOffsetX = 0;
                     groupOffsetY += maxGroupHeightInRow + traceGroupGap;

test/image/baselines/wrap_legend_horizontal_first-column.png

@@ -0,0 +1,52 @@
+{
+  "data": [
+    {
+      "legendgroup": "A",
+      "name": "trace A1",
+      "x": [
+        0,
+        10
+      ],
+      "y": [
+        1,
+        1
+      ]
+    },
+    {
+      "legendgroup": "A",
+      "name": "trace A2",
+      "x": [
+        10,
+        20
+      ],
+      "y": [
+        2,
+        2
+      ]
+    },
+    {
+      "legendgroup": "B",
+      "name": "trace B1",
+      "x": [
+        20,
+        30
+      ],
+      "y": [
+        3,
+        3
+      ]
+    }
+  ],
+  "layout": {
+    "showlegend": true,
+    "legend": {
+      "orientation": "h",
+      "xanchor": "left",
+      "yanchor": "top",
+      "bgcolor": "yellow"
+    },
+    "paper_bgcolor": "lightblue",
+    "width": 250,
+    "height": 250
+  }
+}