diff --git a/draftlogs/6094_fix.md b/draftlogs/6094_fix.md new file mode 100644 index 00000000000..92fcf361fc6 --- /dev/null +++ b/draftlogs/6094_fix.md @@ -0,0 +1 @@ + - Fix vertical spacing of legend items in horizontal mode [[#6094](https://github.com/plotly/plotly.js/pull/6094)] diff --git a/src/components/legend/draw.js b/src/components/legend/draw.js index 0f5e3538fe4..7d0ff625fb5 100644 --- a/src/components/legend/draw.js +++ b/src/components/legend/draw.js @@ -714,7 +714,6 @@ function computeLegendDimensions(gd, groups, traces, legendObj) { offsetY += h; maxWidthInGroup = Math.max(maxWidthInGroup, textGap + w); }); - maxGroupHeightInRow = Math.max(maxGroupHeightInRow, offsetY); var next = maxWidthInGroup + itemGap; @@ -730,6 +729,8 @@ function computeLegendDimensions(gd, groups, traces, legendObj) { groupOffsetX = 0; groupOffsetY += maxGroupHeightInRow + traceGroupGap; maxGroupHeightInRow = offsetY; + } else { + maxGroupHeightInRow = Math.max(maxGroupHeightInRow, offsetY); } Drawing.setTranslate(this, groupOffsetX, groupOffsetY); diff --git a/test/image/baselines/z-legend-row-group-height.png b/test/image/baselines/z-legend-row-group-height.png new file mode 100644 index 00000000000..56db7a5adee Binary files /dev/null and b/test/image/baselines/z-legend-row-group-height.png differ diff --git a/test/image/mocks/z-legend-row-group-height.json b/test/image/mocks/z-legend-row-group-height.json new file mode 100644 index 00000000000..6d4657e09e8 --- /dev/null +++ b/test/image/mocks/z-legend-row-group-height.json @@ -0,0 +1,32 @@ +{ + "data": [ + { + "legendgroup": "A", + "name": "Long label in group A", + "y": [1, 2, 3, 4] + }, + { + "legendgroup": "B", + "name": "b1", + "y": [2, 3, 4, 1] + }, + { + "legendgroup": "B", + "name": "Very long label in another group", + "y": [3, 4, 1, 2] + }, + { + "legendgroup": "B", + "name": "b3", + "y": [4, 1, 2, 3] + } + ], + "layout": { + "paper_bgcolor": "lightblue", + "height": 350, + "width": 350, + "legend": { + "orientation": "h" + } + } +}