[FEATURE]: Clickable Legend Titles

[alexshoe]

Summary

As part of an ongoing Plotly Professional Services contract, Kobold Metals has requested multiple feature requests/bug fixes for Plotly.js. One of these feature requests is the ability to click on legend titles to toggle the visibility of all traces in that legend.

This feature enhancement would be useful for situations where multiple legends are used to organize different categories of data. Clicking a legend title would provide a quick way to show/hide entire categories of traces without clicking each item individually.

Problem Statement

Legend titles are currently non-interactive text elements. When working with multiple legends, users might want to quickly toggle all traces on/off. Currently, this requires clicking each item individually, which can be tedious.

Key Decision: How should we implement clickable legend titles, and what should the default behavior be?

Proposed Solution

API

Add a titleclick attribute to control whether the legend title is clickable:

layout: {
  legend: {
    title: { text: 'Legend 1' },
    titleclick: true
  }
}

The titleclick attribute is a boolean:

• true: Clicking the title toggles all traces in that legend
• false: Title is not clickable

The default value for titleclick depends on the number of legends in the plot:

• Single legend: defaults to false
• Multiple legends: defaults to true

Visual Feedback

Clickable titles will show a pointer cursor on hover, matching the existing legend item behavior.

Implementation Plan (with rough timeline)

1. Add attributes and defaults (Week 1)

   • Add titleclick attribute to src/components/legend/attributes.js
   • Update src/components/legend/defaults.js to set defaults based on legend count

2. Implement click handling (Week 1-2)

   • Add clickable rect overlay to legend titles
   • Create new function to read click event from clicking legend title and toggle all traces in the legend
   • Add pointer cursor styling for clickable titles

3. Testing (Week 2)

   • Write mock and Jasmine tests for clickable legend titles

[robertclaus]

@emilykl could you provide feedback on this plan for @alexshoe ? Thanks!

[emilykl]

@alexshoe Sounds like a plan.

The name titleclick parallels nicely with the existing groupclick, itemclick, and itemdoubleclick attributes for legends.

Question: Rather than true and false, should the accepted values be 'toggle' (or similar) and false to match the pattern of those other attributes more closely?

I'll admit that in isolation, that feels like a much clunkier API. But worth thinking about if you haven't already.

Second question: What would be the downside to having titleclick default to true in all situations? I suppose it's simply not useful when there is only one legend.

[robertcollar-kobold]

Plan looks good on my end! API seems intuitive, and I'm generally behind Emily's comments. Though as someone who initially supported the single-false, multi-true default (and probably still does), one benefit of having true be default in all situations is that it enables default, easy-access toggling of all the traces when they are foreground data to some background (like a Layout Image).