Skip to content

feat: Allow configuration of horizontal legend max height #7359

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 12 commits into from
Mar 6, 2025
1 change: 1 addition & 0 deletions draftlogs/7359_add.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
- Allow configuration of horizontal legend max height [[#7359](https://github.com/plotly/plotly.js/pull/7359)]
12 changes: 12 additions & 0 deletions src/components/legend/attributes.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,18 @@ module.exports = {
editType: 'legend',
description: 'Sets the color of the border enclosing the legend.'
},
maxheight: {
valType: 'number',
min: 0,
editType: 'legend',
description: [
'Sets the max height (in px) of the legend, or max height ratio (reference height * ratio) if less than one.',
'Default value is: 0.5 for horizontal legends; 1 for vertical legends. The minimum allowed height is 30px.',
'For a ratio of 0.5, the legend will take up to 50% of the reference height before displaying a scrollbar.',
'The reference height is the full layout height except for vertically oriented legends with',
'a `yref` of `"paper"`, where the reference height is the plot height.'
].join(' ')
},
borderwidth: {
valType: 'number',
min: 0,
Expand Down
1 change: 1 addition & 0 deletions src/components/legend/defaults.js
Original file line number Diff line number Diff line change
Expand Up @@ -188,6 +188,7 @@ function groupDefaults(legendId, layoutIn, layoutOut, fullData) {

coerce('xanchor', defaultXAnchor);
coerce('yanchor', defaultYAnchor);
coerce('maxheight', isHorizontal ? 0.5 : 1);
coerce('valign');
Lib.noneOrAll(containerIn, containerOut, ['x', 'y']);

Expand Down
9 changes: 3 additions & 6 deletions src/components/legend/draw.js
Original file line number Diff line number Diff line change
Expand Up @@ -769,12 +769,9 @@ function computeLegendDimensions(gd, groups, traces, legendObj) {
var traceGroupGap = legendObj.tracegroupgap;
var legendGroupWidths = {};

// - if below/above plot area, give it the maximum potential margin-push value
// - otherwise, extend the height of the plot area
legendObj._maxHeight = Math.max(
(isBelowPlotArea || isAbovePlotArea) ? fullLayout.height / 2 : gs.h,
30
);
var { maxheight, orientation, yref } = legendObj;
var heightToBeScaled = orientation === "v" && yref === "paper" ? gs.h : fullLayout.height;
legendObj._maxHeight = Math.max(maxheight > 1 ? maxheight : maxheight * heightToBeScaled, 30);

var toggleRectWidth = 0;
legendObj._width = 0;
Expand Down
6 changes: 6 additions & 0 deletions test/plot-schema.json
Original file line number Diff line number Diff line change
Expand Up @@ -3442,6 +3442,12 @@
"min": 30,
"valType": "number"
},
"maxheight": {
"description": "Sets the max height (in px) of the legend, or max height ratio (reference height * ratio) if less than one. Default value is: 0.5 for horizontal legends; 1 for vertical legends. The minimum allowed height is 30px. For a ratio of 0.5, the legend will take up to 50% of the reference height before displaying a scrollbar. The reference height is the full layout height except for vertically oriented legends with a `yref` of `\"paper\"`, where the reference height is the plot height.",
"editType": "legend",
"min": 0,
"valType": "number"
},
"orientation": {
"description": "Sets the orientation of the legend.",
"dflt": "v",
Expand Down