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 — Clickable Legend Titles by alexshoe · Pull Request #7698 · plotly/plotly.js

Conversation

@alexshoe

@alexshoe alexshoe commented Jan 28, 2026 •
edited
Loading

Uh oh!

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

Copy link
Copy Markdown
Contributor

Description:

Adds the ability to click/double-click on legend titles to toggle legend visibility, making it easier to manage complex charts with multiple legends.

Example:

layout: {
  legend: {
    title: { text: 'My Legend' },
    titleclick: 'toggle',  // toggles the legend to which the clicked title belongs
    titledoubleclick: 'toggleothers' // toggles on/off all other legends
  }
}

See this codepen for an interactive demo of this feature

Screenshot 2026-01-30 at 2 54 08 PM

New API:

legend.titleclick

  • Type: enumerated
  • Values: 'toggle' | 'toggleothers' | false
  • Default: 'toggle' when there are multiple legends, false otherwise

legend.titledoubleclick

  • Type: enumerated
  • Values: 'toggle' | 'toggleothers' | false
  • Default: 'toggleothers' when there are multiple legends, false otherwise

What each value for titleclick and titledoubleclick does:

  • 'toggle' toggles the visibility of all items in the clicked legend
  • 'toggleothers' toggles the visibility of all other legends
  • false disables legend title double-click interactions

Bug Fixes:

  • Fixes incorrect item toggle behavior when using multiple legends #6886 - secondary legends, any legends added after the first, now get their own itemclick and itemdoubleclick settings rather than inheriting them from the default legend

Sorry, something went wrong.

Uh oh!

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

emilykl reacted with thumbs up emoji
All reactions
  • 👍 1 reaction
alexshoe added 6 commits January 20, 2026 15:06
@alexshoe
Fix bug where groupclick: toggleitem doesn't work when there are …
88a6c0d
…multiple legends
@alexshoe
Add titleclick and titledoubleclick attributes
b2ef711
@alexshoe
Add handleTitleClick function for toggling visibility via legend title
cdb570a
@alexshoe
Add legend title click toggle setup and event handling
089fa73
@alexshoe
Add mock chart for legend title click feature
207910e
@alexshoe
Only enable legend title click by default when there are multiple leg…
2f934ad
…ends
@alexshoe alexshoe self-assigned this Jan 28, 2026
@alexshoe alexshoe changed the title Clickable legend titles Clickable Legend Titles Jan 28, 2026
@alexshoe alexshoe linked an issue Jan 28, 2026 that may be closed by this pull request
[FEATURE]: Clickable Legend Titles #7687
Closed
alexshoe added 3 commits January 29, 2026 12:12
@alexshoe
Add jasmine tests for legend title click
cd92fea
@alexshoe
Update schema
53073d7
@alexshoe
Merge remote-tracking branch 'origin/master' into clickable-legend-ti…
7c2e878
…tles
@alexshoe
alexshoe marked this pull request as ready for review January 29, 2026 18:51
@alexshoe
alexshoe requested a review from emilykl January 29, 2026 18:51
@alexshoe
Add baseline image
459e229
@emilykl

emilykl commented Jan 30, 2026

Copy link
Copy Markdown
Contributor

@alexshoe Can you document the full API for the new properties in this PR description? Basically just the info that's in the plot schema.

alexshoe reacted with thumbs up emoji
All reactions
  • 👍 1 reaction

Sorry, something went wrong.

Uh oh!

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

@emilykl

emilykl commented Jan 30, 2026

Copy link
Copy Markdown
Contributor

@alexshoe Can you remove the image test?

You can make a Codepen and link it in the PR description for testing purposes, but this feature doesn't require adding an image test to the test suite.

alexshoe reacted with thumbs up emoji
All reactions
  • 👍 1 reaction

Sorry, something went wrong.

Uh oh!

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

emilykl
emilykl reviewed Jan 30, 2026
View reviewed changes
Comment thread src/components/legend/defaults.js Resolved

Uh oh!

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

emilykl
emilykl reviewed Jan 30, 2026
View reviewed changes
Comment thread src/components/legend/defaults.js Resolved

Uh oh!

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

@alexshoe
Convert var to const where applicable
6bec6d1
@alexshoe
alexshoe requested a review from alexcjohnson February 2, 2026 16:52
emilykl
emilykl reviewed Feb 3, 2026
View reviewed changes
Comment thread src/components/legend/draw.js Resolved

Uh oh!

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

emilykl
emilykl reviewed Feb 3, 2026
View reviewed changes
Comment thread src/components/legend/draw.js
Comment on lines +717 to +731
if(numClicks === 1 && legendObj.titleclick) {
const clickVal = Events.triggerHandler(gd, 'plotly_legendtitleclick', evtData);
if(clickVal === false) return;

legendObj._titleClickTimeout = setTimeout(function() {
if(gd._fullLayout) handleTitleClick(gd, legendObj, legendObj.titleclick);
}, doubleClickDelay);
} else if(numClicks === 2) {
if(legendObj._titleClickTimeout) clearTimeout(legendObj._titleClickTimeout);
gd._legendMouseDownTime = 0;

const dblClickVal = Events.triggerHandler(gd, 'plotly_legendtitledoubleclick', evtData);
if(dblClickVal !== false && legendObj.titledoubleclick) handleTitleClick(gd, legendObj, legendObj.titledoubleclick);
}
});

@emilykl emilykl Feb 3, 2026

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.

@alexshoe Could some of the logic in the clickOrDoubleClick() function possibly be reused here? Seems like a fair amount of code duplication, although I'm sure there are some subtle differences.

Sorry, something went wrong.

Uh oh!

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

All reactions
emilykl
emilykl reviewed Feb 3, 2026
View reviewed changes
Comment thread src/components/legend/draw.js Outdated
Comment on lines +734 to +752
function positionTitleToggle(scrollBox, legendObj, legendId) {
const titleToggle = scrollBox.select('.' + legendId + 'titletoggle');
if(!titleToggle.size()) return;

const side = legendObj.title.side || 'top';
const bw = legendObj.borderwidth;
var x = bw;
const width = legendObj._titleWidth + 2 * constants.titlePad;
const height = legendObj._titleHeight + 2 * constants.titlePad;


if(side === 'top center') {
x = bw + 0.5 * (legendObj._width - 2 * bw - width);
} else if(side === 'top right') {
x = legendObj._width - bw - width;
}

titleToggle.attr({ x: x, y: bw, width: width, height: height });
}

@emilykl emilykl Feb 3, 2026

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.

Hmm, likewise this function seems like it's duplicating a lot of the title placement logic. I don't think we should be referencing parameters like legendObj.title.side here at all. My feeling is that the titleToggle logic should be more parallel to the traceToggle placement logic.

Sorry, something went wrong.

Uh oh!

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

All reactions

@alexshoe alexshoe Feb 6, 2026

Copy link
Copy Markdown
Contributor Author

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.

Ok I refactored a few things so that the titleToggle positioning now lives at the end of computeLegendDimensions, right next to the traceToggle block. This required that I also move the horizontalAlignTitle call  there too. Couldn't make it fully identical to the traceToggle pattern since the title text and toggle are siblings in the scrollBox rather than children of a shared <g>

Sorry, something went wrong.

Uh oh!

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

All reactions
emilykl
emilykl reviewed Feb 3, 2026
View reviewed changes
Comment thread src/components/legend/handle_click.js Resolved

Uh oh!

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

emilykl
emilykl reviewed Feb 3, 2026
View reviewed changes
Comment thread src/components/legend/handle_click.js Resolved

Uh oh!

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

emilykl
emilykl reviewed Feb 3, 2026
View reviewed changes
Comment thread src/components/legend/handle_click.js
}
};

exports.handleTitleClick = function handleTitleClick(gd, legendObj, mode) {

@emilykl emilykl Feb 3, 2026

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.

Also similar comment here to above -- check whether you can share some of this logic with the handleClick function to avoid TOO much code duplication

Sorry, something went wrong.

Uh oh!

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

All reactions
emilykl
emilykl reviewed Feb 3, 2026
View reviewed changes
Comment thread src/components/legend/handle_click.js Resolved

Uh oh!

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

emilykl
emilykl reviewed Feb 3, 2026
View reviewed changes
Comment thread src/components/legend/handle_click.js Resolved

Uh oh!

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

emilykl
emilykl reviewed Feb 3, 2026
View reviewed changes
Comment thread src/components/legend/handle_click.js Resolved

Uh oh!

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

alexshoe added 3 commits February 5, 2026 15:53
@alexshoe
Replace null value with early continue and skip non-displayed traces
42c40f6
@alexshoe
Rename handleClick to handleItemClick
2b5d2af
@alexshoe
Test legend title click attributes with non-default values
6cbdb49
@emilykl

emilykl commented Feb 5, 2026

Copy link
Copy Markdown
Contributor

@alexshoe Thanks for the updates, I'll take another pass tomorrow

All reactions

Sorry, something went wrong.

Uh oh!

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

@alexshoe
Move titleToggle positioning into computeLegendDimensions
6f6fd91
@alexshoe

alexshoe commented Feb 6, 2026

Copy link
Copy Markdown
Contributor Author

@emilykl thanks for the comments! I addressed most of the things you flagged but re: the comments on reducing duplication: I think the seperate functions are different enough that merging them into a new helper function and adding new branching logic could make more difficult to read. Maybe you can help me outline your vision for how to clean these funcitons up?

All reactions

Sorry, something went wrong.

Uh oh!

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

@alexshoe

alexshoe commented Feb 6, 2026

Copy link
Copy Markdown
Contributor Author

That said, @alexshoe I can't see any reason why the titleclick property shouldn't be supported for pie charts.

Yeah, agreed that pie charts should be supported for this feature eventually. The reason I left it out for now is that pie visibility is different from other trace types in that it uses hiddenlabels rather than a per-trace visible property. Legend group title clicking is also disabled for pie-like traces and it would be a lot more work to support both legend title and group title toggling for pies. I felt like it was a bit out of scope for this Kobold deliverable and that maybe we could write-up an issue for a follow-up. Would that be ok?

All reactions

Sorry, something went wrong.

Uh oh!

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

@alexcjohnson

alexcjohnson commented Feb 11, 2026

Copy link
Copy Markdown
Collaborator

As long as it's clear in the docs / attribute descriptions where these features don't currently work for pies, I think it's fine to omit that. Not just the mechanics but also the purpose of hiding pie slices is pretty different from hiding traces, so we should think clearly about it and not necessarily feel bound by decisions we made here.

All reactions

Sorry, something went wrong.

Uh oh!

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

@alexcjohnson

alexcjohnson commented Feb 11, 2026

Copy link
Copy Markdown
Collaborator

I see a subtle bug - might be preexisting behavior but to register it: In your original codepen, clicking on the group title Group C does nothing, even though it gets cursor: pointer that implies it's active (unlike Group A and Group B which have the default pointer that implies they are not clickable). But if you remove legend.groupclick="toggleitem" - ie the first legend, making Group A and Group B clickable, Group C becomes clickable too.

All reactions

Sorry, something went wrong.

Uh oh!

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

@alexshoe
Fix group title click resolving to wrong legend by adding missing leg…
e3a068e
…end property
@alexshoe

alexshoe commented Feb 12, 2026 •
edited
Loading

Uh oh!

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

Copy link
Copy Markdown
Contributor Author

@alexcjohnson thanks for discovering that. The object for group titles was missing the legend property, so the click handler fell back to the first legend and picked up the wrong groupclick settings. Added the missing property and now it works correctly. I'll update the codepen with the latest build too

alexcjohnson reacted with hooray emoji
All reactions
  • 🎉 1 reaction

Sorry, something went wrong.

Uh oh!

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

@alexshoe
Update schema
28990fb
emilykl
emilykl reviewed Feb 17, 2026
View reviewed changes
Comment thread src/components/legend/attributes.js Resolved

Uh oh!

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

emilykl
emilykl reviewed Feb 17, 2026
View reviewed changes
Comment thread src/components/legend/attributes.js Resolved

Uh oh!

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

alexshoe and others added 5 commits February 18, 2026 12:55
@alexshoe @emilykl
Update src/components/legend/attributes.js
a9809d2
Co-authored-by: Emily KL <[email protected]>
@alexshoe @emilykl
Update src/components/legend/attributes.js
1fc81de
Co-authored-by: Emily KL <[email protected]>
@alexshoe
Merge remote-tracking branch 'origin/master' into clickable-legend-ti…
fb5b11f
…tles
@alexshoe
Modify baseline images and update schema
f820e7f
@alexshoe
Merge remote-tracking branch 'origin/master' into clickable-legend-ti…
8ee735e
…tles
emilykl
emilykl reviewed Feb 20, 2026
View reviewed changes
Comment thread src/components/legend/handle_click.js Resolved

Uh oh!

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

emilykl
emilykl reviewed Feb 20, 2026
View reviewed changes
Comment thread test/image/baselines/zz-pie-slice-legend2.png Resolved

Uh oh!

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

alexshoe added 2 commits February 20, 2026 11:54
@alexshoe
Explicitly initialize toggleOtherLegends to false in toggle mode
e0be8c5
@alexshoe
Fix legend title opacity incorrectly dimming for pie traces with per-…
0223993
…slice legend assignments
emilykl
emilykl reviewed Feb 20, 2026
View reviewed changes
Comment thread src/components/legend/draw.js Resolved

Uh oh!

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

alexshoe added 2 commits February 20, 2026 13:19
@alexshoe
Fix pie legend item clicks breaking due to array legend lookup crash
e7a1915
@alexshoe
Fix legend traces not toggling when chart is editable by passing lege…
dca2e38
…ndObj instead of d3 selection to clickOrDoubleClick
emilykl
emilykl approved these changes Feb 20, 2026
View reviewed changes

@emilykl emilykl 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.

Awesome work @alexshoe ! 🚀

Sorry, something went wrong.

Uh oh!

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

All reactions
@alexshoe
alexshoe merged commit 3126228 into plotly:master Feb 20, 2026
5 checks passed

Uh oh!

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

@alexshoe
alexshoe deleted the clickable-legend-titles branch February 20, 2026 20:11
@robertcollar-kobold

robertcollar-kobold commented Feb 23, 2026

Copy link
Copy Markdown

Woohoo!!! Congrats on the merge — excited to see it go live :)

All reactions

Sorry, something went wrong.

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

@alexcjohnson alexcjohnson Awaiting requested review from alexcjohnson
1 more reviewer
@emilykl emilykl emilykl approved these changes
Reviewers whose approvals may not affect merge requirements

Uh oh!

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

Assignees

@alexshoe alexshoe

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[FEATURE]: Clickable Legend Titles incorrect item toggle behavior when using multiple legends

Uh oh!

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

4 participants

@alexshoe @emilykl @robertcollar-kobold @alexcjohnson
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.