diff --git a/src/components/legend/draw.js b/src/components/legend/draw.js index 6e6def4260d..d197665ebe5 100644 --- a/src/components/legend/draw.js +++ b/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; diff --git a/test/image/baselines/legend_horizontal_one_row.png b/test/image/baselines/legend_horizontal_one_row.png new file mode 100644 index 00000000000..4916fc09b63 Binary files /dev/null and b/test/image/baselines/legend_horizontal_one_row.png differ diff --git a/test/image/mocks/legend_horizontal_one_row.json b/test/image/mocks/legend_horizontal_one_row.json new file mode 100644 index 00000000000..46d64e7c71f --- /dev/null +++ b/test/image/mocks/legend_horizontal_one_row.json @@ -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" } + } +}