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
+ }
+}