Interactive callback on legend click

Hello,

I have multiple data series (go.Scatter) on single graph. When clicking on legend entry Plotly hides or shows adequate data serie.

Now I’m trying to create callback function which will response to these clicks. After reading https://dash.plot.ly/interactive-graphing I thought that “relayoutData” is the right choice (there is a statement about legend there). But in my case clicking on legend does not fire callback function when it is bound to “relayoutData” input. Other actions - like zooming - are triggering my function.

Is this possible to make such a function? In the function I need data allowing to identified clicked series (series name would be fine)

I’m using dash, dash-core-components == 0.21.0, dash-renderer == 0.11.3 and dash-html-components = 0.9.0

1 Like

It looks like this is actually the plotly_restyle event not the plotly_relayout event. My mistake! This isn’t exposed in the dcc.Graph component yet but it would be a quick addition to add it: https://github.com/plotly/dash-core-components/blob/master/src/components/Graph.react.js#L87-L131

If you’d like to make the PR to add it, feel free! Otherwise, I’ll try to get to it in the next week or two.

1 Like

Many thanks for quick reply.
I did look into the code but I’m not much into JavaScript. I was able to get it running by making simple changes in the source code you pointed out. But I’m not really aware of the way how browser part of the code works. For example if data transported with the event should not be additionally filtered like it is for some events (I left it unfiltered as for relayout event) and whether these are dependent on graph type, etc. So please forgive that I will leave it to the others.

Anyway, after my simple changes I’m receiving such a data from the event:
[{‘visible’: [‘legendonly’]}, [<series_idx>]] - when I click on the legend and series is being disabled
[{‘visible’: [True]}, [<series_idx>]] - when series is enabled

I think that kind of information would allow me to do what I want - but I’m still investigating this.

Many thanks again,
Michal

Nice! The main thing that the filtering is doing is removing some of the extra keys that the event provided. Otherwise, the Graph will pass a lot of extra and unnecessary data to the backend server. You can inspect the event data by putting in a debugger in the graph code or by console.log ing the event.
Feel free to make a PR if you’d like. Thanks for digging into this!

Hey! I’m working on a project where I’d like to create a callback function that responds to toggling series through the legend of another graph.

Has restyle been exposed in the dcc.Graph component? I’m not too familiar with JS but I can try my hand at modifying the component directly in the source, but I wanted to see if this was already modified before I dive into it.

Thanks!

3 Likes

Hi, same for me here! I do need this feature to update a data-table based on the selected legend entries. Is this possible right now?
Cheers, André

3 Likes

Any update on this? I’m only familiar with python, so trying to dive into the js code has been difficult.

1 Like

I’m also looking for this feature. Any update on this?

I’ve submitted a pull request with modifications to Graph.react.js that exposes the restyleData component property. https://github.com/plotly/dash-core-components/pull/483

Legend toggling now triggers callbacks.