Repository navigation
incorrect item toggle behavior when using multiple legends #6886
Description
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)
Activity
Coding-with-Adam commentedon Jan 16, 2024
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 commentedon Jan 16, 2024
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 tolegend2. My goal is to implement distinct interactive behaviors for items associated with each legend. For instance, interacting with an element inlegendshould toggle the visibility of its corresponding time series. Similarly, interacting with an element inlegend2should control the visibility of the shapes within the same category, functioning as a 'toggle group'.However the interactive behaviors like
itemclick,itemdoubleclick, andgroupclickare currently being governed solely by the configuration set for the first legend in the graph. I provided an example, where the itemclick functionality forlegend2is disabled because it's set to 'False' in the configuration forlegend. This problem persists foritemdoubleclickandgroupclickinteractions as well. From the layout reference it is expected that these interactive behaviors are legend specific and not Figure specific.Coding-with-Adam commentedon Jan 19, 2024
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 commentedon Jan 20, 2024
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 commentedon Feb 3, 2024
@Coding-with-Adam
Coding-with-Adam commentedon Feb 5, 2024
Thanks for the reminder @NirRazor .
I'll take a deeper look into this tomorrow and get back to you with any findings.
alexcjohnson commentedon Feb 6, 2024
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 commentedon Feb 6, 2024
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
[-]Item toggle behavior when using multiple legends[/-][+]incorrect item toggle behavior when using multiple legends[/+]