# Triggering Hover Events in python

**URL:** <https://community.plotly.com/t/triggering-hover-events-in-python/75344>\
**Category:** Dash Python\
**Tags:** question\
**Created:** [May 17, 2023, 9:21am UTC](https://community.plotly.com/t/triggering-hover-events-in-python/75344 "2023-05-17T09:21:44Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Vale1](https://avatars.discourse-cdn.com/v4/letter/v/97f17d/32.png) [@Vale1](https://community.plotly.com/u/Vale1)\
**Post date:** [May 17, 2023, 9:21am UTC](https://community.plotly.com/t/triggering-hover-events-in-python/75344/1 "2023-05-17T09:21:44Z")

</div>

Hey,

I am currently creating a dashboard for debugging purposes. So far I have a plot with data points. Upon a click event a data point is chosen, meaning hover data is displayed. However, I’d like to have an input field where one can choose the data point manually, as having to search through all data points to find one specific one is not very handy.  
So I wondered whether it’s possible in python to trigger a hover event when the position of the data point is known?  
I have been looking through a few attempts in JavaScript but couldn’t really figure out how to include this into my code:

1. plotly.Fx.hover(figure, {curveNumber: curveNumber, pointNumber: pointNumber}, “mapbox”)
2. [Hover events in JavaScript](https://plotly.com/javascript/hover-events/#triggering-hover-events)

Appreciate if anyone knows something. Thanks!

---

<div class="post-metadata">

**Author:** ![Skiks](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/skiks/32/26561_2.png) [@Skiks](https://community.plotly.com/u/Skiks)\
**Post date:** [May 17, 2023, 8:20pm UTC](https://community.plotly.com/t/triggering-hover-events-in-python/75344/2 "2023-05-17T20:20:46Z")

</div>

Hi @Vale1  
What do you need to display? Do you have an example?  
Maybe you can use an annotation instead or custom labels on points and show/hide them

---

<div class="post-metadata">

**Author:** ![Vale1](https://avatars.discourse-cdn.com/v4/letter/v/97f17d/32.png) [@Vale1](https://community.plotly.com/u/Vale1)\
**Post date:** [May 18, 2023, 6:38pm UTC](https://community.plotly.com/t/triggering-hover-events-in-python/75344/3 "2023-05-18T18:38:20Z")

</div>

> [@Skiks](#):
>
> Maybe you can use an annotation instead or custom labels on points and show/hide them

Hey @Skiks,

thank you very much for your response!  
It is just a normal scatter plot and I would like to highlight one data point after another by choosing its number. However, the scatter contains many data points and the processing time is rather long. So I’m trying to avoid manually changing it and having to rerun the callback function as this would mean recalculating the whole scatter.

Please let me know if you have any idea on how to approach this!

Cheers!

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [May 18, 2023, 6:50pm UTC](https://community.plotly.com/t/triggering-hover-events-in-python/75344/4 "2023-05-18T18:50:52Z")

</div>

Hello @Vale1,

It sounds like you could use Partial updates new from Dash 2.9.

> **[Partial Property Updates | Dash for Python Documentation | Plotly](https://dash.plotly.com/partial-properties)**
>
> Improve app performance by using partial updates to Dash component properties.

With this, you can implement @Skiks suggestion of making an annotation, without having to rerender the whole plot.

If you are looking for displaying data quickly by hovering, you should check out here:

> [@Loading images on hover (from /assets) is a bit slow with thousands of images. How can I speed it up?](https://community.plotly.com/t/loading-images-on-hover-from-assets-is-a-bit-slow-with-thousands-of-images-how-can-i-speed-it-up/69170/5):
>
> @z.adamg, Here, I made a slight alteration to the clientside callback to push the data to the screen immediately. from dash import Dash, dcc, html, Input, Output, no\_update, State import plotly.graph\_objects as go import pandas as pd # Small molcule drugbank dataset Source= 'https://raw.githubusercontent.com/plotly/dash-sample-apps/main/apps/dash-drug-discovery/data/small\_molecule\_drugbank.csv' df = pd.read\_csv(Source, header=0, index\_col=0) fig = go.Figure(data=[ go.Scatter( x=…

---

<div class="post-metadata">

**Author:** ![Skiks](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/skiks/32/26561_2.png) [@Skiks](https://community.plotly.com/u/Skiks)\
**Post date:** [May 19, 2023, 10:28am UTC](https://community.plotly.com/t/triggering-hover-events-in-python/75344/5 "2023-05-19T10:28:10Z")

</div>

Indeed, Patch() + annotation seem to work fine, also using `go.Scattergl()` instead of `go.Scatter()` should help if you have lot of points.

Here an example with 10,000 points:

```python
import dash
from dash import dcc, html, Input, Output, Patch
import dash_bootstrap_components as dbc
import plotly.graph_objects as go
import numpy as np

app = dash.Dash( __name__ , external_stylesheets=[dbc.themes.SPACELAB])

N = 10000
r = np.random.uniform(0, 1, N)
theta = np.random.uniform(0, 2 * np.pi, N)

fig = go.Figure(data=go.Scattergl(
    x=r * np.cos(theta),
    y=r * np.sin(theta),
    mode='markers',
    marker=dict(
        colorscale='Viridis',
        line_width=1
    ),
))

fig.add_annotation()

fig.update_layout(height=1000)

app.layout = html.Div(
    [
        dbc.Input(id="input-id", type="number", min=0, max=N - 1, step=1, placeholder='Select ID',
                  className='text-center', style={'width': 150}),
        dcc.Graph(id="graph-scatergl", figure=fig),
    ]
)

@app.callback(
    Output("graph-scatergl", "figure"),
    Input("input-id", "value"),
)
def highlight_point(point_id):
    fig_patch = Patch()

    if point_id is None:
        fig_patch['data'][0]['marker']['color'] = r
        fig_patch['data'][0]['marker']['opacity'] = 1
        fig_patch['layout']['annotations'][0]['visible'] = False
        return fig_patch

    x = round(r[point_id] * np.cos(theta[point_id]), 2)
    y = round(r[point_id] * np.sin(theta[point_id]), 2)
    text = f'x = {x}<br>y = {y}'
    marker_opacity = [0.2] * N
    marker_opacity[point_id] = 1

    fig_patch['data'][0]['marker']['opacity'] = marker_opacity
    fig_patch['layout']['annotations'][0].update(
        visible=True,
        x=x, y=y,
        text=text,
        showarrow=False,
        xshift=35,
        bgcolor="rgba(255,255,255,0.8)",
    )

    return fig_patch

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

```

ℹ I made no comments in the code, don’t hesitate to ask me for details.

I used markers opacity to have a nice fading effect to have a better highlight on the selected point.  
But if you have performance issues, you may remove opacity modification, as it updates an array of size N and maybe use an arrow with the annotation to point on the … point 😆 to be more precise.

And you can customize your annotation as you like, see [Styling and Coloring Annotations](https://plotly.com/python/text-and-annotations/#styling-and-coloring-annotations)