Item toggle behavior when using multiple legends

[NirRazor]

I’m facing an issue with Plotly where I’m trying to create a figure with two legends, each requiring different behavior. The first legend should have ‘toggle’ item behavior, allowing individual traces to be toggled on and off. The second legend should have ‘togglegroup’ item behavior, enabling the toggling of entire legend groups.

Problem:

The problem I’m encountering is that the second legend is inheriting the clicking behavior of the first legend, regardless of the configurations I’ve attempted (group / item).

Reproducible Example:

import plotly.express as px
import plotly.graph_objects as go
import numpy as np

np.random.seed(42)
x = np.random.rand(100)
y1 = np.random.rand(100)
y2 = np.random.rand(100)

fig = go.Figure()
# Traces
fig.add_trace(go.Scatter(x=x, y=y1, mode='markers'))
fig.add_trace(go.Scatter(x=x, y=y2, mode='markers'))

# Shapes
fig.add_shape(type="circle", x0=0.2, y0=0.2, x1=0.4, y1=0.4, xref="x", yref="y", line=dict(color="red"), opacity=0.5, name='Shape1', legendgroup='Group1', legend='legend2', showlegend=True)
fig.add_shape(type="circle", x0=0.6, y0=0.6, x1=0.8, y1=0.8, xref="x", yref="y", line=dict(color="blue"), opacity=0.5, name='Shape2', legendgroup='Group2', legend='legend2', showlegend=True)

# Customize layout
fig.update_layout(legend=dict(itemclick=False), legend2=dict(yanchor="top", y=1.2, xanchor="left", x=0.01, itemclick='toggle'))

# Show the figure
fig.show('browser')

In the example above, I disabled the first legend itemclick behavior and set the second one to ‘toggle’ (regardless to the group). Unfortunately, both legends itemclick is disabled. 😦

Tested with latest Plotly version 5.18 (Plotly.js version is v2.27.0)

[Coding-with-Adam]

hi @NirRazor
What do you mean when you say you want the second legend to toggle entire legend groups.
If a user would click Shape1 or Shape2, both would turn off?

[NirRazor]

hi @NirRazor What do you mean when you say you want the second legend to toggle entire legend groups. If a user would click Shape1 or Shape2, both would turn off?

In my current setup, I have a graph that displays multiple time series, which are collectively represented under legend. Additionally, this graph includes various shapes, specifically vertical lines that represent historical events. These events are categorized and linked to legend2. My goal is to implement distinct interactive behaviors for items associated with each legend. For instance, interacting with an element in legend should toggle the visibility of its corresponding time series. Similarly, interacting with an element in legend2 should control the visibility of the shapes within the same category, functioning as a 'toggle group'.

However the interactive behaviors like itemclick, itemdoubleclick, and groupclick are currently being governed solely by the configuration set for the first legend in the graph. I provided an example, where the itemclick functionality for legend2 is disabled because it's set to 'False' in the configuration for legend. This problem persists for itemdoubleclick and groupclick interactions as well. From the layout reference it is expected that these interactive behaviors are legend specific and not Figure specific.

[Coding-with-Adam]

Thanks for the explanation @NirRazor .
When I ran your coded above, the legends worked for me as expected. I'm assuming that you are looking for a different type of legend behavior, which is not fully clear to me yet.

Do you mind speaking to the code you shared in the very first post. If you were able to accomplish what you're looking for, what would we see? What would happen if I clicked on legend 2 in your graph?
Feel free to share images and annotations to explain your desired result.

[NirRazor]

Thank you for your response. To clarify, my goal is to have two legends with distinct interactive behaviors:

Legend 1 (Time Series): Each item in this legend corresponds to a time series on the graph. The desired behavior here is standard – clicking on an item should toggle the visibility of its corresponding time series (individual trace toggling).

Legend 2 (Historical Events): This legend relates to various shapes (like vertical lines) representing historical events. The key here is that I want to toggle groups of these shapes together. For example, if 'Legend2' contains categories A, B, and C, clicking on A should toggle the visibility of all shapes under category A, and similarly for B and C.

In my example that I have provided I just try to explain the issue that is preventing me to do so. The issue is that all the legends are inheriting the behavior of the first legend. So, if I set itemclick: false in the first legend, the second legend also inherits this non-interactive behavior, which is not intended.

Ideally, In my example above here's what should happen:

If I click on a time series name in 'Legend 1', nothing should happen (as its toggle behavior is disabled)
If I click a shape in 'Legend 2', only that specific shape should toggle on/off.

(Due to the unexpected behavior, both legends toggle behavior is disabled)

I hope this better explains the specific functionality I'm trying to achieve.

[NirRazor]

@Coding-with-Adam

[Coding-with-Adam]

Thanks for the reminder @NirRazor .
I'll take a deeper look into this tomorrow and get back to you with any findings.

[alexcjohnson]

Thanks @NirRazor - confirmed, this is a bug, click behavior was never updated to support multiple legends. I'll move this to the plotly.js repo and comment on where the fix is needed.

[alexcjohnson]

The problem is right here, click handler needs to refer to the specific legend being clicked, rather than fullLayout.legend:

plotly.js/src/components/legend/handle_click.js

Lines 14 to 16 in 08e06bd

	var itemClick = fullLayout.legend.itemclick;
	var itemDoubleClick = fullLayout.legend.itemdoubleclick;
	var groupClick = fullLayout.legend.groupclick;