clear_on_unhover=True not working!

Dash Python
1

Hi all

I’m fairly new to Dash and I’m currently learning how to connect 2 graphs together through hover action.

The code below produces 2 graphs; 1 bar graph for sum of sales by country and 1 line graph for daily sales. The line graph displays the daily sales for all countries by default and when a country is hovered over on the bar chart the line graph updates to only show that country’s data.

The problem is that when I “unhover” and move the mouse away from the country, the line graph doesn’t go back to the default state and always shows the data for the last country hovered over.

Setting clear_on_unhover=True in the graph property is supposed to do what I’m looking for but it doesn’t and I appreciate it if someone could help me figure it out what’s wrong with my code.

Screenshots provided under the code

import dash
from dash import html
from dash import dcc
import plotly.express as px
import pandas as pd
from dash.dependencies import Input, Output

sales_df = pd.read_excel('ecom_sales.xlsx')

sales_by_country_df = sales_df.groupby('Country', as_index=False)['OrderValue'].sum()
sales_country_bar_graph = px.bar(sales_by_country_df, x='Country', y='OrderValue', text_auto=True)

app = dash.Dash(__name__)

app.layout = html.Div(children=[
                        dcc.Graph(id='bar_graph', figure=sales_country_bar_graph),
                        dcc.Graph(id='line_graph', clear_on_unhover=True)
                        ])

@app.callback(Output('line_graph', 'figure'),
              Input('bar_graph', 'hoverData'))

def update_line(hoverData):
    if hoverData is None:
        all_countries_time_series_df = sales_df.groupby('InvoiceDate', as_index=False)['OrderValue'].sum()
        return px.line(all_countries_time_series_df, x='InvoiceDate', y='OrderValue')
    else:
        country = hoverData['points'][0]['x']
        single_country_time_series_df = sales_df[sales_df['Country']== country]
        ecom_sales_line_country = single_country_time_series_df.groupby('InvoiceDate', as_index=False)['OrderValue'].sum()
        return px.line(ecom_sales_line_country, x='InvoiceDate', y='OrderValue')


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

When the app first runs

App start
App start1920×942 51.4 KB

After hovering over

hover over
hover over1920×935 48.4 KB

After hovering off, the graph doesn’t update

hover off
hover off1898×917 45.7 KB

1 Like
2

Hello @mo.elauzei,

Welcome to the community and thank you for posting such a good explanation of the issue you are encountering!

Here is something that I tried:

import dash
from dash import html
from dash import dcc
import plotly.express as px
import pandas as pd
from dash.dependencies import Input, Output

sales_df = px.data.gapminder()

sales_by_country_df = sales_df.groupby('country', as_index=False)['pop'].sum()
sales_country_bar_graph = px.bar(sales_by_country_df, x='country', y='pop', text_auto=True)

app = dash.Dash(__name__)

app.layout = html.Div(children=[
                        dcc.Graph(id='bar_graph', figure=sales_country_bar_graph, clear_on_unhover=True),
                        dcc.Graph(id='line_graph')
                        ])

@app.callback(Output('line_graph', 'figure'),
              Input('bar_graph', 'hoverData'))

def update_line(hoverData):
    if hoverData is None:
        all_countries_time_series_df = sales_df.groupby('year', as_index=False)['pop'].sum()
        return px.line(all_countries_time_series_df, x='year', y='pop')
    else:
        country = hoverData['points'][0]['x']
        single_country_time_series_df = sales_df[sales_df['country']== country]
        ecom_sales_line_country = single_country_time_series_df.groupby('year', as_index=False)['pop'].sum()
        return px.line(ecom_sales_line_country, x='year', y='pop')


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

When I was working on this, I noticed that your clear_on_unhover=True was on the wrong chart, it belongs on the bar_graph and not the line. :slight_smile:

2 Likes
3

Thank you so much for the kind welcome and the quick answer, @jinnyzor .

2 Likes