diff --git a/draftlogs/5996_fix.md b/draftlogs/5996_fix.md new file mode 100644 index 00000000000..bc94fc7e62a --- /dev/null +++ b/draftlogs/5996_fix.md @@ -0,0 +1 @@ + - Do not wrap legend items if already on the first column [[#5996](https://github.com/plotly/plotly.js/pull/5996)] diff --git a/src/components/legend/draw.js b/src/components/legend/draw.js index 561022d82d6..ef87d4bd1c9 100644 --- a/src/components/legend/draw.js +++ b/src/components/legend/draw.js @@ -700,19 +700,28 @@ function computeLegendDimensions(gd, groups, traces, legendObj) { var maxWidthInGroup = 0; var offsetY = 0; d3.select(this).selectAll('g.traces').each(function(d) { + var w = d[0].width; var h = d[0].height; + Drawing.setTranslate(this, titleSize[0], titleSize[1] + bw + itemGap + h / 2 + offsetY ); offsetY += h; - maxWidthInGroup = Math.max(maxWidthInGroup, textGap + d[0].width); + maxWidthInGroup = Math.max(maxWidthInGroup, textGap + w); }); maxGroupHeightInRow = Math.max(maxGroupHeightInRow, offsetY); var next = maxWidthInGroup + itemGap; - if((next + bw + groupOffsetX) > legendObj._maxWidth) { + // horizontal_wrapping + if( + // not on the first column already + groupOffsetX > 0 && + + // goes beyound limit + next + bw + groupOffsetX > legendObj._maxWidth + ) { maxRowWidth = Math.max(maxRowWidth, groupOffsetX); groupOffsetX = 0; groupOffsetY += maxGroupHeightInRow + traceGroupGap; diff --git a/test/image/baselines/wrap_legend_horizontal_first-column.png b/test/image/baselines/wrap_legend_horizontal_first-column.png new file mode 100644 index 00000000000..78878d837a6 Binary files /dev/null and b/test/image/baselines/wrap_legend_horizontal_first-column.png differ diff --git a/test/image/mocks/wrap_legend_horizontal_first-column.json b/test/image/mocks/wrap_legend_horizontal_first-column.json new file mode 100644 index 00000000000..349a5da19c6 --- /dev/null +++ b/test/image/mocks/wrap_legend_horizontal_first-column.json @@ -0,0 +1,52 @@ +{ + "data": [ + { + "legendgroup": "A", + "name": "trace A1", + "x": [ + 0, + 10 + ], + "y": [ + 1, + 1 + ] + }, + { + "legendgroup": "A", + "name": "trace A2", + "x": [ + 10, + 20 + ], + "y": [ + 2, + 2 + ] + }, + { + "legendgroup": "B", + "name": "trace B1", + "x": [ + 20, + 30 + ], + "y": [ + 3, + 3 + ] + } + ], + "layout": { + "showlegend": true, + "legend": { + "orientation": "h", + "xanchor": "left", + "yanchor": "top", + "bgcolor": "yellow" + }, + "paper_bgcolor": "lightblue", + "width": 250, + "height": 250 + } +}