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

src/components/legend/handle_click.js

+    const legendItem = g.data()[0][0];
+    if(legendItem.groupTitle && legendItem.noClick) return;
+
+    const legendId = legendItem.trace.legend || 'legend';


If I understand correctly, this fixes a bug where 'secondary' legends (e.g. legend2, legend3, etc.) used the click settings of legend rather than using their own settings, is that right? I've tried it out in Codepen and that seems to be the case.

I believe that fixes this issue, can you confirm @alexshoe ? If so, please tag in PR description.

emilykl · 2026-02-03T20:35:52Z

src/components/legend/handle_click.js

+exports.handleTitleClick = function handleTitleClick(gd, legendObj, mode) {
+    const fullLayout = gd._fullLayout;
+    const fullData = gd._fullData;
+    const legendId = legendObj._id || 'legend';


perhaps move the getId() function in src/components/legend/draw.js to helpers.js and use it here, since it does exactly this

emilykl · 2026-02-03T21:26:48Z

src/components/legend/handle_click.js

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


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

emilykl · 2026-02-03T21:30:16Z

src/components/legend/handle_click.js

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


It does bother me that this function signature isn't the same as the one for handleClick() -- maybe this signature is better and/or more appropriate for legend titles! But just double check that the signature makes sense.

Like for the sake of consistency, would it be better to accept numClicks here? Or alternatively modify handleClick() to accept a mode argument?

emilykl · 2026-02-03T21:39:29Z

src/components/legend/handle_click.js

+    var toggleThisLegend;
+    var toggleOtherLegends;
+
+    if(mode === 'toggle') {


it's unclear what are the possible values for mode. Can you add a docstring for the handleTitleClick function?

emilykl · 2026-02-03T21:41:14Z

src/components/legend/handle_click.js

+        });
+
+        toggleThisLegend = !anyVisibleHere;
+        toggleOtherLegends = null;


Suggested change

toggleOtherLegends = null;

toggleOtherLegends = false;

I don't see why you wouldn't make this false

emilykl · 2026-02-03T21:53:52Z

src/components/legend/handle_click.js

+
+    for(var i = 0; i < allLegendItems.length; i++) {
+        const item = allLegendItems[i];
+        const shouldShow = isInLegend(item) ? toggleThisLegend : toggleOtherLegends;


Is this right? I feel like this might give the wrong result when item.showlegend is false. I can try to come up with a reproducible example if that would help.

robertcollar-kobold · 2026-02-04T18:54:36Z

This is looking good on my end @alexshoe! I'll leave the js details to @emilykl. Though qq: why is this disabled for pie chart legends? (not that this is relevant to our use case) Do they not have traditional legend titles (something to do with being multi-category)?

emilykl · 2026-02-04T19:59:27Z

@robertcollar-kobold Pie charts do sometimes need unique logic compared to other trace types when it comes to legends, since pie chart legends contain one entry per data point rather than one entry per trace.

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

Here's an example of a pie chart with multiple legends:

Plot def:

Details

{
  "data": [
    {
      "type": "pie",
      "labels": ["a", "b", "c"],
      "values": [3,5,4],
      "showlegend": true,
      "domain": {"row": 0, "column": 0},
    },
    {
      "type": "pie",
      "labels": ["d", "e", "f"],
      "values": [1,3,7],
      "legend": "legend2",
      "showlegend": true,
      "domain": {"row": 0, "column": 1},
    },
  ],
  "layout": {
    "grid": {"rows": 1, "columns": 2},
    "legend": {
      "title": {"text": "Mylegend"},
      "visible": true,
    },
    "legend2": {
      "title": {"text": "Mylegend2"},
      "visible": true,
      "y": 0.15,
      "itemclick": false,
    },
  }
}

Image:

emilykl · 2026-02-04T20:24:19Z

src/components/legend/handle_click.js

 var SHOWISOLATETIP = true;

-module.exports = function handleClick(g, gd, numClicks) {
+exports.handleClick = function handleClick(g, gd, numClicks) {


Rename this function to handleItemClick() for clarity

emilykl · 2026-02-04T20:50:54Z

@alexshoe @robertcollar-kobold One question I just thought of, whose answer is not immediately obvious to me (but maybe it is to you):

Should clicking the legend title toggle the visibility of all traces listed in the legend (i.e. those with showlegend: true implicitly or explicitly), or should it toggle the visibility of all traces associated with that legend, regardless of whether they are visually listed?

Here's a mock to make it clearer. Each legend has one trace for which showlegend is set to false.

Details

var plotDef = {
  "data": [
    {
      "x": [1,2,3],
      "y": [2,4,3],
      "showlegend": false,
    },
    {
      "x": [1,2,3],
      "y": [3,5,4],
      "showlegend": true,
    },
    {
      "x": [2,4,6],
      "y": [2,1,5],
      "legend": "legend2",
      "showlegend": true,
    },
    {
      "x": [2,4,6],
      "y": [3,2,6],
      "yaxis": "yaxis2",
      "legend": "legend2",
      "showlegend": false,
    },
  ],
  "layout": {
    "shapes": [
      {
        "type": "rect",
        "x0": 1,
        "x1": 2.5,
        "y0": 4,
        "y1": 5.5,
        "line": {"color": "#FF0000"},
        "showlegend": true,
      },
      {
        "type": "rect",
        "x0": 5,
        "x1": 6,
        "y0": 1,
        "y1": 2,
        "line": {"color": "#FF00FF"},
        "legend": "legend2",
        "showlegend": false,
      },
    ],
    "legend": {
      "title": {"text": "Mylegend"},
      "visible": true,
    },
    "legend2": {
      "title": {"text": "Mylegend2"},
      "visible": true,
      "y": 0.25,
    },
    "yaxis2": {
      "overlaying": "yaxis",
    }
  }
};

emilykl · 2026-02-04T21:11:03Z

test/jasmine/tests/legend_test.js

+                    titleclick: 'toggle',
+                    titledoubleclick: false
+                }
+            }).then(function() {
+                expect(gd._fullLayout.legend.titleclick).toBe('toggle');
+                expect(gd._fullLayout.legend.titledoubleclick).toBe(false);


Suggested change

titleclick: 'toggle',

titledoubleclick: false

}

}).then(function() {

expect(gd._fullLayout.legend.titleclick).toBe('toggle');

expect(gd._fullLayout.legend.titledoubleclick).toBe(false);

titleclick: 'toggleothers',

titledoubleclick: 'toggle',

}

}).then(function() {

expect(gd._fullLayout.legend.titleclick).toBe('toggleothers');

expect(gd._fullLayout.legend.titledoubleclick).toBe('toggle');

Should test with values which are never the default

alexshoe added 6 commits January 20, 2026 15:06

Fix bug where groupclick: toggleitem doesn't work when there are …

88a6c0d

…multiple legends

Add titleclick and titledoubleclick attributes

b2ef711

Add handleTitleClick function for toggling visibility via legend title

cdb570a

Add legend title click toggle setup and event handling

089fa73

Add mock chart for legend title click feature

207910e

Only enable legend title click by default when there are multiple leg…

2f934ad

…ends

alexshoe self-assigned this Jan 28, 2026

alexshoe changed the title ~~Clickable legend titles~~ Clickable Legend Titles Jan 28, 2026

alexshoe linked an issue Jan 28, 2026 that may be closed by this pull request

[FEATURE]: Clickable Legend Titles #7687

Open

alexshoe added 3 commits January 29, 2026 12:12

Add jasmine tests for legend title click

cd92fea

Update schema

53073d7

Merge remote-tracking branch 'origin/master' into clickable-legend-ti…

7c2e878

…tles

alexshoe marked this pull request as ready for review January 29, 2026 18:51

alexshoe requested a review from emilykl January 29, 2026 18:51

Add baseline image

459e229

emilykl reviewed Jan 30, 2026

View reviewed changes

src/components/legend/defaults.js Show resolved Hide resolved

emilykl reviewed Jan 30, 2026

View reviewed changes

src/components/legend/defaults.js Outdated Show resolved Hide resolved

Convert var to const where applicable

6bec6d1

alexshoe requested a review from alexcjohnson February 2, 2026 16:52

emilykl reviewed Feb 3, 2026

View reviewed changes

emilykl reviewed Feb 4, 2026

View reviewed changes

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

Uh oh!

Clickable Legend Titles #7698

Are you sure you want to change the base?

Clickable Legend Titles #7698

Conversation

alexshoe commented Jan 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description:

New API:

Uh oh!

emilykl commented Jan 30, 2026

Uh oh!

emilykl commented Jan 30, 2026

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

emilykl Feb 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

robertcollar-kobold commented Feb 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

emilykl commented Feb 4, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

emilykl commented Feb 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

alexshoe commented Jan 28, 2026 •

edited

Loading

emilykl Feb 3, 2026 •

edited

Loading

robertcollar-kobold commented Feb 4, 2026 •

edited

Loading

emilykl commented Feb 4, 2026 •

edited

Loading