Changing cursor on go.Scatter plot on hover over point only

Dash Python
1

Hi, I’m trying to change the mouse cursor from crosshair to pointer when I hover over the “points” on my scatter plot.
Changing CSS changes the cursor over the entire plot, but I want to change the cursor to pointer only when it hovers over the points and stay as default crosshair everywhere else in the plot.

What’s the best way to achieve this?

Minimum example to test:

import pandas as pd
import plotly.graph_objects as go
import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html

df = pd.DataFrame(
    {
        "x": range(5),
        "y": range(5),
        "url": ["https://google.com"]*5
    }
)

fig = go.Figure(
    go.Scatter(
        x=df["x"],
        y=df["y"],
        text=df["url"]
    )
)

# Setup the Dash App
external_stylesheets = [dbc.themes.BOOTSTRAP]
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

# Server
server = app.server

app.layout = html.Div([
    dcc.Graph(figure=fig)
])


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

Change the cursor to pointer only when the mouse hovers over the points in the plot. I plan to make the points clickable with URLs, hence changing the cursor to indicate those points are clickable will help the user experience.

image
image1170×348 19.4 KB