Graph hover feature

Dash Python
1

Hello Plotly community,

I have a dash app using map using mapbox. My app is similar to the app on the dash gallery (Oil & Gas Wells) where you have a hover text box when you have a mouse hover over a well on the map and a graph in another component dynamically updates.

I was wondering if there is a way for example, to hover over the well but instead of a hover textbox, have a hover graph pop up right where the mouse is. This way i can remove the graph component in my app and create more room for my map and lose no analytic insight since I still have my graph when i hover over the point of interest.

Please let me know how I could go about doing this with the dash library.

Thanks

2

Hi @encyclopediabrown welcome to the forum! It’s not possible to do this at the moment, but

  • if you’re happy with a static image instead of an interactive graph in the forum, we have an open issue in plotly.js to allow images in hover tags. This is a big feature so it would probably require sponsoring.
  • you could also put the graph in a modal window which would appear on hover (although this might be a bit intrusive) or on click. See for example the dash-web-trader app and its source code: when you click on one of the stocks and hit the “buy/sell” button you have a modal graph which appears. The appearance of the modal window is set by css.
3

You can do it in Dash Leaflet. Here is a small example,

import dash
import dash_html_components as html
import dash_core_components as dcc
import dash_leaflet as dl
import plotly.express as px

# Example graph.
df = px.data.iris()
fig = px.scatter(df, x="sepal_width", y="sepal_length")
graph = dcc.Graph(figure=fig, style={"width": "400px", "height": "250px"})
# Create map with marker.
app = dash.Dash()
app.layout = html.Div([
    dl.Map([dl.TileLayer(), dl.CircleMarker(center=(56, 10), children=dl.Tooltip(graph))],
           id="map", style={'width': '100%', 'height': '100vh', 'margin': "auto", "display": "block"}),
])

if __name__ == '__main__':
    app.run_server()
4

Thanks @Emil, I needed this for mapbox though.

5

I figured Dash doesnt have this functionality. I was asked to see if I can do it in dash. Its ok.
Thanks

6

Hello @Emmanuelle, if I were to go this route, How do I set a modal for the 300 locations on the map?

Thanks