diff --git a/draftlogs/7359_add.md b/draftlogs/7359_add.md new file mode 100644 index 00000000000..4096e99d0fa --- /dev/null +++ b/draftlogs/7359_add.md @@ -0,0 +1 @@ + - Allow configuration of horizontal legend max height [[#7359](https://github.com/plotly/plotly.js/pull/7359)] diff --git a/src/components/legend/attributes.js b/src/components/legend/attributes.js index 029c49cf0a8..bd897937339 100644 --- a/src/components/legend/attributes.js +++ b/src/components/legend/attributes.js @@ -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, diff --git a/src/components/legend/defaults.js b/src/components/legend/defaults.js index aad87454867..fa292be02e7 100644 --- a/src/components/legend/defaults.js +++ b/src/components/legend/defaults.js @@ -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']); diff --git a/src/components/legend/draw.js b/src/components/legend/draw.js index 0c15194a713..d29dd859f44 100644 --- a/src/components/legend/draw.js +++ b/src/components/legend/draw.js @@ -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; diff --git a/test/plot-schema.json b/test/plot-schema.json index 6aa77cf3338..25532360b03 100644 --- a/test/plot-schema.json +++ b/test/plot-schema.json @@ -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",