How can I implement a callback function that reacts to mouseout
and restores a default when not hovering over a data point?
I simplified a code snipped from the ‘Interactive Visualizations’ section of the Plotly|Dash tutorial to illustrate my question. In this example a callback
function returns the mouseover
information. How do I return something else on mouseout
?
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.express as px
import pandas as pd
app = dash.Dash(__name__)
df = pd.DataFrame({
"x": [1,2,1,2],
"y": [1,2,3,4]
})
fig = px.scatter(df, x="x", y="y")
fig.update_traces(marker_size=20)
app.layout = html.Div([
dcc.Graph(
id='basic-interactions',
figure=fig
),
html.Div([
html.Pre(id='hover-data')
])
])
@app.callback(
Output('hover-data', 'children'),
Input('basic-interactions', 'hoverData'))
def display_hover_data(hoverData):
if hoverData:
return str(hoverData)
else:
return "hover over data point"
if __name__ == '__main__':
app.run_server(debug=True)