Interactive callback on legend click

Dash Python
1

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
2

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
3

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

4

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!

5

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
6

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é

2 Likes
7

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

1 Like
8

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

9

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.

1 Like
10

Has this been fixed? I see that it’s been implemented and added in the prior fixes though I’m trying to implement it and not sure what I’m doing wrong or how to. I’m trying to essentially use the toggled legend items from a scatter plot to update another Dash Table component using the items that are “toggled on” from the restyleData property.

I tried this simply to check that the toggled options were correctly getting captured and I’m not seeing any data captured from the restyleData property; it’s returning None. Example:

# Callback for toggling topic descriptions based on bubble chart
@app.callback(Output('topic-table', 'style_data_conditional'),
              [Input('bubble-plot', 'restyleData')])
def update_topics_highlighted(selected_topics):
    print(selected_topics)

Anyone have any feedback or ideas on what I may be doing wrong?

EDIT: Nevermind! I figured it out. I just refresh / start a new session and it was displaying the event data correctly from the legend.

1 Like