Black Lives Matter. Please consider donating to Black Girls Code today.

Way to 'cancel' hoverData

Hello!

I’m trying to develop a dashboard that has a map that updates per year. However, I have two ways to update the year in the map: a dcc.Slider input and a time series graph having year as the hovering data.

The problem arises because whenever I hover the graph, the slider input gets non-functional because the years were already updated by the hovering in the time series. Is there a way to ‘erase hoverData’ when the mouse is placed off the graph?

The code chunk that I tried (but unsuccessfully) follows:

@app.callback(
Output(‘choropleth-graph’, ‘figure’),
[Input(‘timeseries-graph’,‘hoverData’),
Input(‘years-slider’,‘value’)])
def update_map(year_hovered, year_selected_slider):

if year_hovered is None: 
    year = year_selected_slider

else:
    year = year_hovered['points'][0]['x']

Best regards,
Renan

You can try the clear_data_on_unhover property. This will set the data to None on unhover.

Note that if you are using hoverData to update the graph itself, this doesn’t work super well (when the graph redraws, it will clear its hover data, causing the callback to be fired, causing the graph to redraw, and so on in a loop)

Thank you very much! Actually, the property name was ‘clear_on_unhover’ and then I set to ‘True’ and I worked just as I expected!

Is there a tutorial that I can read more about this? I didn’t a link to all the properties available for each components.

Kind regards,
Renan Xavier Cortes

There isn’t right now. Ideally this would be covered in this chapter: https://dash.plot.ly/interactive-graphing and ideally there would be a section on the dcc.Graph in https://dash.plot.ly/dash-core-components/ but I haven’t written that yet.

For now, you can always figure out which properties are available by calling help on them:

>>> import dash_core_components as dcc
>>> help(dcc.Graph)

Right! Thank you, Chris!

Chris, I’m having the same problem but now with clickData. I’ve seen that there’s no similar argument, for example, ‘clear_on_unclick = True’. How can I manage this situation?

Best,
Renan

I don’t think this is possible right now. We’re working on more generic click handling in this issue https://github.com/plotly/plotly.js/issues/1852 and in particular this pull request: https://github.com/plotly/plotly.js/pull/2824. It’s a big effort but we’re getting close!