Highlighting the plot (change of colour or size etc) on 1 graph when I hover on 2nd graph's plot

Dash Python
5

Here is an example

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, State, Event

app = dash.Dash(__name__)
server = app.server
app.config.suppress_callback_exceptions = False
app.scripts.config.serve_locally = True

x = np.arange(1, 10, 1)
data = [
    go.Scatter(
        x=x,
        y=x**2,
        mode='lines+markers',
        name='curve 1',
        line={
            'color': '#EF553B',
            'width': 2
        }
    ),
    go.Scatter(
        x=x,
        y=x,
        mode='lines+markers',
        name='curve 2',
        line={
            'color': 'blue',
            'width': 2
        }
    )
]

data2 = [
    go.Scatter(
        x=x,
        y=x**2,
        mode='lines+markers',
        name='curve 1',
        line={
            'color': '#EF553B',
            'width': 2
        }
    ),
    go.Scatter(
        x=x,
        y=x,
        mode='lines+markers',
        name='curve 2',
        line={
            'color': 'blue',
            'width': 2
        }
    ),
    go.Scatter(
        x=[],
        y=[],
        mode='markers',
        name='highlight',
        marker={
            'color': 'black',
            'size': 15
        },
        showlegend=False
    )
]

layout = go.Layout(
    autosize=True,
    hovermode="closest",
)

fig = dict(data=data, layout=layout)
fig2 = dict(data=data2, layout=layout)

app.layout = html.Div(
    [
        dcc.Graph(
            id='graph1',
            figure=fig,
            hoverData=None,
            clear_on_unhover=True
        ),
        dcc.Graph(
            id='graph2',
            figure=fig2,
            hoverData=None
        )
    ]
)


@app.callback(
    Output('graph2', 'figure'),
    [],
    [
        State('graph2', 'figure'),
        State('graph1', 'hoverData'),
    ],
    [
        Event('graph1', 'hover'),
        Event('graph1', 'unhover')
    ]
)
def update_graph(fig2, data):

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

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

    else:
        fig2['data'][-1]['x'] = []
        fig2['data'][-1]['y'] = []

    return fig2

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