Clickable Legend Titles #7698

alexshoe · 2026-01-28T21:16:09Z

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

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

…multiple legends

…ends

…tles

emilykl · 2026-01-30T16:51:29Z

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

emilykl · 2026-01-30T16:54:51Z

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

src/components/legend/defaults.js

emilykl · 2026-02-03T01:44:31Z

src/components/legend/draw.js

+        // Don't create a click targets for group titles when groupclick is 'toggleitem'
+        if(d[0].groupTitle && legendObj.groupclick === 'toggleitem') return;


@alexshoe Is this line an unrelated bugfix for groupclick? Or is it related to the titleclick functionality?

(it's fine either way just want to clarify)

emilykl · 2026-02-03T18:35:11Z

src/components/legend/draw.js

+        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);
+        }
+    });


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

emilykl · 2026-02-03T18:46:44Z

src/components/legend/draw.js

+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 });
+}


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.

emilykl · 2026-02-03T20:27:13Z