Update point of graph_objects on hover of another graph

Dash Python
1

Hi,

I’m trying to connect two graph, one with point on a map and another one with corresponding point on a scatter plot.
My goal is that when I move over a point of one of the two graph, the color of the corresponding one on the other graph changes

Here is my approach:

html.Div(
    [
        dcc.Graph(
          id='plot_scatter_point',
        ),
        dcc.Graph(
          id='plot_map_point',
        )
    ]
)

@app.callback(
    [Output("plot_scatter_point", "figure"), Output("plot_map_point", "figure")],
    [Input("search", "n_clicks"), Input('plot_scatter_point', 'hoverData'), Input('plot_map_point', 'hoverData')],
    [State("filter1", "value"), State('plot_scatter_point', 'figure'), State('plot_map_point', 'figure')]
)
def show_dataframe_price_distrib(n_clicks, hover_plot_scatter_point, hover_plot_map_point, filter1, fig_scatter_point, fig_map_point):
    if n_clicks is None:
        raise PreventUpdate

    if hover_plot_msquare_map is not None:
        # Change color of corresponding point on 'plot_map_point' figure
        # Update fig_map_point 
        return fig_scatter_point, fig_map_point

    if hover_plot_msquare_point is not None:
        # Change color of corresponding point on 'plot_scatter_point' figure
        # Update fig_scatter_point 
        return fig_scatter_point, fig_map_point

    df = ...
    
    fig_scatter_point = go.Figure()
  
    fig_scatter_point.add_trace(go.Scatter(
        x=df.date,
        y=df.price,
        mode="markers",
        name="Lines, Markers and Text"
    ))

    fig_map_point = go.Figure()

    fig_map_point.add_trace(go.Scattermapbox(
        lat=df.latitude,
        lon=df.longitude,
        mode='markers',
        marker=go.scattermapbox.Marker(
            color=df.price,
        ),
    ))
    
    return fig_scatter_point, fig_map_point

My questions are :

Is there a better way than returning both figures updated each time the callback is triggered ?
If no, how could I update the map graph and scatter graph ?

I tried without success (at the updating stage of the code):

fig_scatter_point.append({'x': ['2014-03-01'], 'y': [5000]})

and

fig_scatter_point.add_trace(go.Scatter(
     x=['2014-03-01'],
     y=[120],
     mode="markers",
     marker=dict(
         color='red',
         size=12,
         line=dict(
             color='rgba(255, 0, 0, 0.5)',
             width=1
         )
     ),
))

A huge thanks in advance for your help !

2

Hi @lou80

maybe you should post this in the Dash forum, you will probably get better chances of useful response

Greets, Alex-

3

Yes indeed, thanks Alex !