Hover display values on multiple figures

Dash Python
1

Hi there,

I have two plots. I’m trying to have hover on one plot trigger hover over another plot at say same ‘x’. I went through the community forums and guess that it is not possible. If it is possible, could someone please let me know!

An alternate is to have points highlighted on second plot corresponding to hover on 1st plot. Example below illustrates this. I tried to recreate an older example with Event (Event has been made redundant in Dash).

import dash
import dash_core_components as dcc
import dash_html_components as html
import numpy as np
import plotly.graph_objs as go
from dash.dependencies import Input, Output

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = JupyterDash(__name__, external_stylesheets=external_stylesheets)

x = np.arange(1, 10, 1)
y=x**2
z=x**3


fig1 = go.Figure(go.Scatter(x=x,y=y))
fig2 = go.Figure(go.Scatter3d(x=x,y=y,z=z,mode='lines'))
fig2.add_trace(go.Scatter3d(x=[],y=[],z=[],mode='markers'))
fig2.update_layout(height=800)

app.layout = html.Div(
    [
        dcc.Graph(
            id='graph1',
            figure=fig1,
         ),
        dcc.Graph(
            id='graph2',
            figure=fig2,
        )
    ]
)


@app.callback(
    Output('graph2', 'figure'),
    [Input('graph1','hoverData')])
def update_graph(hoverData):

    if hoverData is not None:
        # get the information about the hover point
#        hover_curve_idx = hoverData['points'][0]['curveNumber']
        hover_pt_idx = hoverData['points'][0]['x']
#        data_to_highlight = fig2['data'][hover_curve_idx]

        # change the last curve which is reserved for highlight
        fig2['data'][1]['x'] = hover_pt_idx
        fig2['data'][1]['y'] = y[hover_pt_idx]
        fig2['data'][1]['z'] = z[hover_pt_idx]

    else:
        fig2['data'][1]['x'] = []
        fig2['data'][1]['y'] = []
        fig2['data'][1]['z'] = []
    return fig2



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

This generates the two plots as needed. But the hover doesn’t do as needed. See the error below:

Hover
Hover1860×918 119 KB

It seems that Scatter3d (and scatter too) plot cannot take a single value?

Can someone please help?

Thanks
Vivek