✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🧬 Learn how to build RNA-Seq data apps with Python & Dash. Register for the May 20 Webinar!

Highlighting point without redrawing entire figure

Hello,

I am using Dash and Plotly.py to create two scatterplots showing different columns of the same dataset (Figure1 and Figure2). I would like to make it so that when the user hovers over a point in Figure1, that same point is highlighted in Figure2. My dataset is quite large, so redrawing the figures is not really an option for me. Is there a way to add a trace to an already existing figure? Or somehow overlay a point to an existing plot? Or highlighting a point in any way without redrawing the plot? I am open to anything including using toggle spike lines or anything that will distinguish a point from others in the figure.

Small example:

df = {
    a:[0,1,2,3,4]
    b:[5,6,7,8,9]
    c:[10,11,12,13,14]
    d:[15,16,17,18,19]
}

@app.callback(
    Output("figure1", "figure"),
    [Input("df ", "data")],
)
def create_figure1(df):
    fig = go.Figure()
    fig.add_trace(
        go.Scattergl(
            x=df[a],
            y=df[b],
        )
    )
    return fig

@app.callback(
    Output("figure2", "figure"),
    [Input("df ", "data")],
)
def create_figure2(df):
    fig = go.Figure()
    fig.add_trace(
        go.Scattergl(
            x=df[c],
            y=df[d],
        )
    )
    return fig

In this example, the idea is that if the user hovers over point [0,5] in Figure1, that point [10,15] will be highlighted in Figure2.