Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

Where did Event class go (from a 4 year old example)?

Hello,

I am trying to make this example run dash-recipes/multiple-hover-data.py at master · plotly/dash-recipes · GitHub . But, the Event class, in the following line

from dash.dependencies import Input, Output, Event

cannot be found.

I’d appreciate help in making this example work. Thank you.

Hi,

Event was removed from Dash many versions ago.

To make it work, just remove the two callbacks that are using it and add clear_on_unhover=True in dcc.Graph, as explained in this post (note that this parameter also changed name!).

An updated version (dash v2) would look like:

from dash import Dash, Input, Output, dcc, html

app = Dash(
    __name__, external_stylesheets=["https://codepen.io/chriddyp/pen/bWLwgP.css"]
)

app.layout = html.Div(
    [
        html.Div(
            [
                html.Div(
                    dcc.Graph(
                        id="graph-1",
                        figure={
                            "data": [
                                {
                                    "x": [1, 2, 3],
                                    "y": [4, 1, 5],
                                    "mode": "markers",
                                    "marker": {"size": 12},
                                }
                            ]
                        },
                    ),
                    className="six columns",
                ),
                html.Div(
                    dcc.Graph(
                        id="graph-2",
                        figure={
                            "data": [
                                {
                                    "x": [1, 2, 3],
                                    "y": [2, 5, 10],
                                    "mode": "markers",
                                    "marker": {"size": 12},
                                }
                            ]
                        },
                        clear_on_unhover=True,
                    ),
                    className="six columns",
                ),
            ],
            className="row",
        ),
        html.Div(id="container"),
    ]
)


@app.callback(
    Output("container", "children"),
    [Input("graph-1", "hoverData"), Input("graph-2", "hoverData")],
)
def updateContent(hoverData1, hoverData2):
    print(hoverData1)
    print(hoverData2)
    if hoverData1 is not None:
        return html.Div([html.Div("Graph 1"), html.Pre(hoverData1)])
    if hoverData2 is not None:
        return html.Div([html.Div("Graph 2"), html.Pre(hoverData2)])


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

@jlfsjunior, Thanks it works!

1 Like