diff --git a/src/components/legend/draw.js b/src/components/legend/draw.js index 4de2e679429..a7017fda0ac 100644 --- a/src/components/legend/draw.js +++ b/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; diff --git a/test/image/baselines/legend_large_margin.png b/test/image/baselines/legend_large_margin.png new file mode 100644 index 00000000000..259e998ae2f Binary files /dev/null and b/test/image/baselines/legend_large_margin.png differ diff --git a/test/image/mocks/legend_large_margin.json b/test/image/mocks/legend_large_margin.json new file mode 100644 index 00000000000..5fd21bdb68d --- /dev/null +++ b/test/image/mocks/legend_large_margin.json @@ -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 + } + + } +}