Callback for Click-Anywere in a Graph

Dash Python
1

I have a graph that renders a line chart.
I have multiple problems:

  1. I want a callback that is triggered wherever I click in the Graph
  2. I want to update the Graph with a vertical line once it is clicked. As the graph contains a lot of points, I do not want to submit the whole data again, just update the graph with an additional vertical line.

I currently have the following code. Though, I can only click on points in the go.Scatter, but I want to be able to click anywhere. Also, when I add the go.Scatter line, my original line plot vanishes.

app.layout = html.Div(
    children=[
        dcc.Graph(
            id="graph", figure=figure(), animate=True, config=dict(scrollZoom=True)
        )])

@app.callback(
    [Output("graph", "figure")],
    [Input("graph", "clickData")],
    [State("graph", "hoverData")],
)
def figure_callback(relayoutData, clickData, storeData, hoverData):
    ctx = dash.callback_context

    event = ctx.triggered[0]["prop_id"].split(".")[1]

    if event == "clickData":
        return click_figure(clickData, hoverData)
    else:
        return dash.no_update, dash.no_update


def click_figure(clickData, hoverData):
    print("click")

    x = clickData['points'][0]['x']
    data = [
        go.Scatter(
            x=[x, x],
            y=[0, 1.0],
            line={"color": "#a39999"},
            opacity=1.0,
            name="Moving Line",
        )
    ]

    return {'data': data}

Thank you already for your help :slight_smile: