GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Sign in
  • ActionsCI/CD and automation
  • CodespacesCloud development environments
  • All Features
  • Documentation
  • Training
  • Certifications
  • Build with Copilot
  • Customize Copilot
  • Integrations
  • Trending repos
  • GitHub Sponsors
  • Developer articles
  • Enterprises

This view

  • Original page
  • New address

GeezerVison is showing github.com — Add legend.itemheight to set the height of the legend fill swatch by MannXo · Pull Request #7925 · plotly/plotly.js

Conversation

@MannXo

@MannXo MannXo commented Jul 29, 2026 •
edited
Loading

Uh oh!

There was an error while loading. Please reload this page.

Copy link
Copy Markdown
Contributor

Closes #7924

Adds layout.legend.itemheight, the vertical counterpart to the existing itemwidth, so a taller legend swatch can reveal more of a trace's fillpattern.

The two parts

The fill swatch height was hardcoded in src/components/legend/style.js:

fill.attr('d', pathStart + 'h' + itemWidth + 'v6h-' + itemWidth + 'z')

That v6 is the 6 pixels mentioned in the issue. Making it configurable on its own is not enough, though: legend row height is computed in draw.js as Math.max(height, 16) + 3, so anything taller than about 13px would have overlapped its neighbours. That is most likely the "my vertical alignment is off" in the original report. This PR changes both:

  • attributes.js / defaults.js: new itemheight, min: 6, dflt: 6, editType: 'legend'. min === dflt mirrors itemwidth exactly (min: 30, dflt: 30).
  • style.js: v6 becomes v<itemheight>.
  • draw.js: row height becomes Math.max(height, 16, legendObj.itemheight + 10) + 3, so items grow to fit the swatch.

At the default the rendering is unchanged. Since 6 + 10 === 16, the new term cannot win at itemheight: 6, and the swatch path is still v6. I kept the literal 16 as an independent floor rather than replacing it with itemheight + 10, because those two being equal at the default is a choice of constant on my part, not something I can show about why 16 was originally picked.

The swatch grows downwards, leaving pathStart alone. That keeps the trace line sitting on the top edge of the fill, which is how a filled area actually renders in the plot, and it matches the mock in the issue. It also means a trace with no fill is completely unaffected, since pathStart is what positions the line.

Unified hover labels need no separate handling: hover.js builds its mockLegend through legendSupplyDefaults, so the new attribute is coerced there too.

Before / after

Three fillpattern traces, default versus legend.itemheight: 24. The /, x and . patterns are hard to tell apart at 6px and legible at 24px.

Before After
image image

Testing

npm run test-jasmine -- legend --nowatch gives 132 passing, of which 8 are new. hover_label is 221 passing. npm run lint, npm run test-syntax and npm run test-mock are all clean. test/plot-schema.json regenerated with npm run schema; dist/ deliberately untouched.

New tests:

Test Purpose
reproduces the historical 6px swatch at the default pins M5,0h30v6h-30z so the default cannot drift
grows the fill swatch to the requested height the feature
grows the swatch downwards, leaving the line on top of the fill pins the growth direction
does not move the swatch of a trace without fill guards unfilled traces
grows each legend row so taller swatches do not overlap the draw.js half
leaves row heights untouched at the default no regression for existing charts
applies to unified hover labels without error the mockLegend path
defaults itemheight to 6 and clamps values below the minimum coercion

I verified the tests actually bind to the change rather than passing regardless. Reverting only the style.js line fails exactly the two swatch-growth tests and nothing else; reverting only the draw.js line fails exactly the row-growth test. The default-behaviour guards pass either way by design, which is what stops the feature from degenerating into "move the swatch".

Three things worth a maintainer's call

  1. Scope. itemheight currently drives only the fill swatch. Bar and marker swatches have their own fixed geometry (styleBars draws M6,6H-6V-6H6Z, a 12x12 square). Should itemheight drive those too, or stay fill-only as the issue requests?
  2. min: 6. Chosen to match today's height and to mirror itemwidth's min === dflt. Happy to lower it if you would rather allow thinner swatches.
  3. Label alignment. Because the swatch grows downwards, the label sits nearer the top of a tall swatch rather than centred on it. legend.valign already offers some control here and the default is untouched, so I left text positioning alone rather than adding a second alignment mechanism. Say the word if you would prefer the label centred on the swatch.

No image mock is included yet. The itemwidth precedent is test/image/mocks/legend_itemwidth_dashline.json, so I am happy to add one, but since baselines are generated on ubuntu-latest I would rather take the baseline from CI than commit a macOS render. Let me know and I will add it.

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

All reactions
MannXo added 2 commits July 29, 2026 14:58
@MannXo
Add legend.itemheight to set the height of the legend fill swatch
3bde39f
@MannXo
Add draftlog
ea366fc
@camdecoster camdecoster assigned emilykl Jul 30, 2026
@camdecoster

camdecoster commented Jul 30, 2026

Copy link
Copy Markdown
Contributor

Thanks for the PR! Our team will review and follow up.

MannXo reacted with heart emoji
All reactions
  • ❤️ 1 reaction

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@robertclaus
robertclaus requested a review from KoolADE85 September 15, 2026 20:17
@robertclaus robertclaus assigned KoolADE85 and unassigned emilykl Sep 15, 2026
@MannXo MannXo closed this Sep 24, 2026
@MannXo

MannXo commented Sep 24, 2026

Copy link
Copy Markdown
Contributor Author

Closing this, since it has fallen behind main without being picked up for review. Happy to rebase and reopen if it's still wanted.

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@camdecoster

camdecoster commented Sep 24, 2026

Copy link
Copy Markdown
Contributor

Let's keep it open. You happened to open your PR when we trying to get v4 out the door, so it fell our radar. It's back on now! Could you please merge main and address any conflicts that come up?

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@camdecoster camdecoster reopened this Sep 24, 2026
@MannXo
Merge branch 'main' into feat/7924-legend-itemheight
903b311
Regenerate src/types/generated/schema.d.ts for legend.itemheight.
@MannXo

MannXo commented Sep 26, 2026

Copy link
Copy Markdown
Contributor Author

Thanks for reopening. I merged main and resolved the one conflict (both sides appended tests at the end of legend_test.js). I also regenerated src/types/generated/schema.d.ts, which v4 now requires for the new attribute. Lint, typecheck, schema-typegen-diff-check, test-syntax, test-mock and the legend and hover jasmine suites all pass locally.

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

camdecoster added 5 commits October 2, 2026 06:36
@camdecoster
Move legend calc values into constants
bbfd42e
@camdecoster
Shift legend row items up when required
b970de1
@camdecoster
Add/update tests
62feadc
@camdecoster
Update attribute description
3b5407f
@camdecoster
Linting/formatting
143e1d1
@camdecoster

camdecoster commented Oct 2, 2026

Copy link
Copy Markdown
Contributor

I made some changes to address the swatch overflow. Now the swatch can grow along with the row and the label will remain centered. I refactored the calcs to save some of the "magic numbers" into constants with descriptions. That should help future devs understand how they're being used and why. Could you please add or update a mock to show this feature?

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

camdecoster and others added 2 commits October 2, 2026 11:42
@camdecoster
Update draftlog
2d3f904
@MannXo
Show legend itemheight in the fill pattern mock
a151ec4
The mock draws five fillpattern traces with a legend. A 20px fill swatch makes each pattern visible in the legend, so the image test covers the new attribute.
@camdecoster camdecoster assigned camdecoster and unassigned KoolADE85 Oct 3, 2026
@camdecoster

camdecoster commented Oct 3, 2026

Copy link
Copy Markdown
Contributor

You can grab the new baseline from the failed CI run. Commit the new one and the baseline tests should pass. Then we can get this approved.

All reactions

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

@MannXo
Update the fill pattern baseline for legend itemheight
36c97ee
Taken from the baselines-default-diff artifact of the failed test-baselines run.
camdecoster
camdecoster approved these changes Oct 5, 2026
View reviewed changes

@camdecoster camdecoster left a comment

Copy link
Copy Markdown
Contributor

There was a problem hiding this comment.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for adding this feature!

Sorry, something went wrong.

Uh oh!

There was an error while loading. Please reload this page.

All reactions
@camdecoster
camdecoster merged commit 1f53454 into plotly:main Oct 5, 2026
167 of 170 checks passed

Uh oh!

There was an error while loading. Please reload this page.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@camdecoster camdecoster camdecoster approved these changes
@KoolADE85 KoolADE85 Awaiting requested review from KoolADE85

Uh oh!

There was an error while loading. Please reload this page.

Assignees

@camdecoster camdecoster

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[FEATURE]: Setting itemheight (analogous to itemwidth) to increase height of fill in legend

Uh oh!

There was an error while loading. Please reload this page.

4 participants

@MannXo @camdecoster @emilykl @KoolADE85
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.