I'm building a simple app using Dash Plotly.
The default setting is that the graph 'Compares data on hover'.
I want to change the default setting to 'Show closest data on hover':
How can this be done in the code below?
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash(__name__)
app.layout = html.Div(children=[
html.H1(children='Hello New Other Change', ),
html.Div(children='''
Dash: A web application framework for Python.
'''),
dcc.Graph(
id='example-graph',
figure={
'data': [
{'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
{'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
],
'layout': {
'title': 'Dash Data Visualization',
}
}
)
])
if __name__ == '__main__':
app.run_server(debug=True)
Setting your graph default to showing closest data in plotly dash can be done by adding hovermode to the figure, as follows:
figure={
'data': [
{'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
{'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
],
'layout': {
'hovermode': 'closest',
}
}
Setting your graph default to compare data is done by:
'layout': {
'hovermode': 'compare',
}
Update to Sander van den Oord's answer, at least as of dash 1.0.2:
layout.hovermode = 'closest' # for "Show closest data on hover"
layout.hovermode = 'x' # for "Compare data on hover"
Other options include:
layout.hovermode = 'y' # similar to x but switches tags accordingly
layout.hovermode = False # nothing shown on hover
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With