diff --git a/src/components/legend/draw.js b/src/components/legend/draw.js index 608fb7eaab6..58dfb61243d 100644 --- a/src/components/legend/draw.js +++ b/src/components/legend/draw.js @@ -630,7 +630,6 @@ function computeLegendDimensions(gd, groups, traces) { var offsetX = 0; var fullTracesWidth = 0; var traceGap = opts.tracegroupgap || 5; - var oneRowLegend; // calculate largest width for traces and use for width of all legend items traces.each(function(d) { @@ -639,15 +638,16 @@ function computeLegendDimensions(gd, groups, traces) { }); // check if legend fits in one row - oneRowLegend = fullLayout._size.w > borderwidth + fullTracesWidth - traceGap; + var oneRowLegend = fullLayout._size.w > borderwidth + fullTracesWidth - traceGap; + traces.each(function(d) { var legendItem = d[0]; var traceWidth = oneRowLegend ? 40 + d[0].width : maxTraceWidth; if((borderwidth + offsetX + traceGap + traceWidth) > fullLayout._size.w) { offsetX = 0; - rowHeight = rowHeight + maxTraceHeight; - opts._height = opts._height + maxTraceHeight; + rowHeight += maxTraceHeight; + opts._height += maxTraceHeight; // reset for next row maxTraceHeight = 0; } @@ -657,16 +657,20 @@ function computeLegendDimensions(gd, groups, traces) { (5 + borderwidth + legendItem.height / 2) + rowHeight); opts._width += traceGap + traceWidth; - opts._height = Math.max(opts._height, legendItem.height); // keep track of tallest trace in group offsetX += traceGap + traceWidth; maxTraceHeight = Math.max(legendItem.height, maxTraceHeight); }); + if(oneRowLegend) { + opts._height = maxTraceHeight; + } else { + opts._height += maxTraceHeight; + } + opts._width += borderwidth * 2; opts._height += 10 + borderwidth * 2; - } // make sure we're only getting full pixels diff --git a/test/image/baselines/legend_horizontal_wrap-alll-lines.png b/test/image/baselines/legend_horizontal_wrap-alll-lines.png new file mode 100644 index 00000000000..116dea894e6 Binary files /dev/null and b/test/image/baselines/legend_horizontal_wrap-alll-lines.png differ diff --git a/test/image/mocks/legend_horizontal_wrap-alll-lines.json b/test/image/mocks/legend_horizontal_wrap-alll-lines.json new file mode 100644 index 00000000000..f34f4c03b65 --- /dev/null +++ b/test/image/mocks/legend_horizontal_wrap-alll-lines.json @@ -0,0 +1,58 @@ +{ + "data": [ + { + "x": [ 1, 2, 3, 4 ], + "y": [ 3, 5, 1, 7 ], + "name": "Break this and last
trace will display properly" + }, + { + "x": [ 1, 2, 3, 4 ], + "y": [ 3, 5, 1, 7 ], + "name": "You need to break this trace twice if first one has no break" + }, + { + "x": [ 1, 2, 3, 4 ], + "y": [ 3, 5, 1, 7 ], + "name": "You need to break this trace twice if first one has no break" + }, + { + "x": [ 1, 2, 3, 4 ], + "y": [ 3, 5, 1, 7 ], + "name": "You need to break this trace twice if first one has no break" + }, + { + "x": [ 1, 2, 3, 4 ], + "y": [ 3, 5, 1, 7 ], + "name": "You need to break this trace twice if first one has no break" + }, + { + "x": [ 1, 2, 3, 4 ], + "y": [ 3, 5, 1, 7 ], + "name": "You need to break this trace twice if first one has no break" + }, + { + "x": [ 1, 2, 3, 4 ], + "y": [ 3, 5, 1, 7 ], + "name": "This
contains
a break" + } + ], + "layout": { + "legend": { + "orientation": "h", + "xanchor": "center", + "yanchor": "top", + "x": 0.5, + "y": -0.1, + "traceorder": "normal" + }, + "paper_bgcolor": "rgba(255,0,0,0.5)", + "margin": { + "l": 20, + "r": 20, + "t": 20, + "b": 20 + }, + "width": 360, + "height": 600 + } +}