Item toggle behavior when using multiple legends about plotly.js HOT 8 OPEN

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?

from plotly.js.

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.

from plotly.js.

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.

from plotly.js.

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.

from plotly.js.

@Coding-with-Adam

from plotly.js.

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

from plotly.js.

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.

from plotly.js.

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

from plotly.js.