Merge pull request #2983 from plotly/2971-legend_large_margin

fix legend when figures has large margins

Author: antoinerg

src/components/legend/draw.js

@@ -639,12 +639,12 @@ function computeLegendDimensions(gd, groups, traces) {
         });
 
         // check if legend fits in one row
-        oneRowLegend = (fullLayout.width - (fullLayout.margin.r + fullLayout.margin.l)) > borderwidth + fullTracesWidth - traceGap;
+        oneRowLegend = fullLayout._size.w > borderwidth + fullTracesWidth - traceGap;
         traces.each(function(d) {
             var legendItem = d[0],
                 traceWidth = oneRowLegend ? 40 + d[0].width : maxTraceWidth;
 
-            if((borderwidth + offsetX + traceGap + traceWidth) > (fullLayout.width - (fullLayout.margin.r + fullLayout.margin.l))) {
+            if((borderwidth + offsetX + traceGap + traceWidth) > fullLayout._size.w) {
                 offsetX = 0;
                 rowHeight = rowHeight + maxTraceHeight;
                 opts._height = opts._height + maxTraceHeight;

test/image/baselines/legend_large_margin.png

@@ -0,0 +1,40 @@
+{
+    "data": [{
+            "x": [1, 2, 3, 4],
+            "y": ["long y label long y label long y label", "a", "b", "c"],
+            "name": "trace 1"
+        },
+        {
+            "x": [1.1, 2.1, 3.1, 4.1],
+            "y": ["long y label long y label long y label", "a", "b", "c"],
+            "name": "trace 1"
+        },
+        {
+            "x": [1.2, 2.2, 3.2, 4.2],
+            "y": ["long y label long y label long y label", "a", "b", "c"],
+            "name": "trace 1"
+        },
+        {
+            "x": [1.3, 2.3, 3.3, 4.3],
+            "y": ["long y label long y label long y label", "a", "b", "c"],
+            "name": "trace 1"
+        },
+        {
+            "x": [1.4, 2.4, 3.4, 4.4],
+            "y": ["long y label long y label long y label", "a", "b", "c"],
+            "name": "trace 1"
+        }
+    ],
+    "layout": {
+        "width": 500,
+        "height": 500,
+        "legend": {
+            "orientation": "h",
+            "bgcolor": "#ffffff00"
+        },
+        "yaxis": {
+            "automargin": true
+        }
+
+    }
+}