Plotly Dash: is it possible to change the behaviour of a double click on the legend?

Dash Python
1

Hi!

I know that by default when double clicking on the legend of a line plot the graph will only show that specific line.
I was wondering if it is possible to override this behaviour by defining a different callback.

I didn’t immediately find answers on the web, so thank you for the help.

2

hi @JonasDB
Welcome back to the forum. What kind of behavior specifically are you trying to override? Do you prefer the legend not be clickable?

3

Hi @adamschroeder,

Currently I have a graph showing some data about a series of broad categories of things.
I would like that when I double click one of these categories in the legend instead of just showing this singular category to “zoom” in on this category.
So let’s say I show the amount of money spent over time and the legend shows categories: food, electricity, …
When I double click food I would like the graph to show for example the amount of money spent on pasta, pizza, cereal, …
Currently I have no good way of showing this in my dashboard but I would like to integrate it and thought of doing it like this. Although I’m not sure how I could implement a back button for this behaviour to go back to the original graph showing all the categories.

Thank you for your help!

4

hi @JonasDB
You can probably do it by reading the legend interactivity, using the dcc.Graph’s restyleData property as an Input of a callback. However, it’s a bit complicated to differentiate betwixt the legend item clicked once, clicked twice, and those not clicked. Plus, I’m not sure how common it is to create interactions between several graphs using the legend. The legend is commonly used to filter in and out data within its respective graph.

I’ve added code that creates interactivity between two graphs using hover data.

from dash import Dash, html, dash_table, dcc, callback, Output, Input
import pandas as pd
import plotly.express as px

df = px.data.gapminder().query("continent=='Africa'")
country_index_list=df.country.unique()


fig = px.line(df, x="year", y="lifeExp", color='country')

app = Dash(__name__)

# App layout
app.layout = html.Div([
    dcc.Graph(id='line-graph', figure=fig),
    dcc.Graph(id='bar-chart', figure={})
])

@app.callback(
    Output("bar-chart", "figure"),
    Input("line-graph", "hoverData"),
    prevent_initial_call=True
)
def update_markers(hover_data):
    print("we want to extract the curveNumber to get the country from the country_index_list")
    print(hover_data)

    trace = hover_data['points'][0]['curveNumber']
    country_hovered = country_index_list[trace]
    dff = df[df.country==country_hovered]

    fig_bar = px.bar(dff, x='year', y='gdpPercap', title=dff.country.unique()[0])
    return fig_bar


# Run the app
if __name__ == "__main__":
    app.run_server(debug=True)

If you’re really keen on doing it with the legend, try to replace the callback above with this callback below, and play around with the legend_data argument to extract the values you need.

@app.callback(
    Output("bar-chart", "figure"),
    Input("line-graph", "restyleData"),
    prevent_initial_call=True
)
def update_markers(legend_data):
    print(legend_data)
    # return empty graph for now until we understand how to extract the clicked legend information we need.
    return {}
5

Hi @adamschroeder,

Thank you for the advice!
I’ll take a look at it.