Merge pull request #2149 from apalchys/legend_entries_width

Fix legend items aligning

Author: etpinard

src/components/legend/draw.js

@@ -608,17 +608,22 @@ function computeLegendDimensions(gd, groups, traces) {
         var rowHeight = 0,
             maxTraceHeight = 0,
             maxTraceWidth = 0,
-            offsetX = 0;
+            offsetX = 0,
+            fullTracesWidth = 0,
+            traceGap = opts.tracegroupgap || 5,
+            oneRowLegend;
 
         // calculate largest width for traces and use for width of all legend items
         traces.each(function(d) {
             maxTraceWidth = Math.max(40 + d[0].width, maxTraceWidth);
+            fullTracesWidth += 40 + d[0].width + traceGap;
         });
 
+        // check if legend fits in one row
+        oneRowLegend = (fullLayout.width - (fullLayout.margin.r + fullLayout.margin.l)) > borderwidth + fullTracesWidth - traceGap;
         traces.each(function(d) {
             var legendItem = d[0],
-                traceWidth = maxTraceWidth,
-                traceGap = opts.tracegroupgap || 5;
+                traceWidth = oneRowLegend ? 40 + d[0].width : maxTraceWidth;
 
             if((borderwidth + offsetX + traceGap + traceWidth) > (fullLayout.width - (fullLayout.margin.r + fullLayout.margin.l))) {
                 offsetX = 0;

test/image/baselines/legend_horizontal_one_row.png

@@ -0,0 +1,26 @@
+{
+    "data": [
+        {
+            "x": [0, 1, 2, 3, 4, 5, 6, 7, 8],
+            "y": [0, 3, 6, 4, 5, 2, 3, 5, 4],
+            "type": "scatter",
+            "name": "title"
+        },
+        {
+            "x": [0, 1, 2, 3, 4, 5, 6, 7, 8],
+            "y": [0, 4, 7, 8, 3, 6, 3, 3, 4],
+            "type": "scatter",
+            "name": "this is a really long legend title"
+        },
+        {
+            "x": [0, 1, 2, 3, 4, 5, 6, 7, 8],
+            "y": [2, 6, 5, 9, 2, 4, 6, 3, 7],
+            "type": "scatter",
+            "name": "this is a title"
+        }
+    ],
+    "layout": {
+        "title": "Average Distribution per Month",
+        "legend": { "orientation": "h" }
+    }
+}