Click on a background image

Dash Python
1

Is there a suggested way to get a click point on a background image on a graph. I am not really using the dcc.Graph to plot graphs, rather to have images displayed with different layers, and then allowing user to interact with this. I currently just have code like this that allows me to get a selected range from the dragMode

    fig = go.Figure()
    scatter = go.Scatter(x=[])
    fig.add_trace(scatter)
    height, width, image = get_image_base64("image.png")

    fig.add_layout_image(
        source="data:image/png;base64,{}".format(image),
        xref="x",
        yref="y",
        x=0,
        y=height,
        sizex=width,
        sizey=height,
        opacity=1,
        layer="below",
    )

    fig.update_layout(
        dragmode="select",
        xaxis=dict(visible=False, range=[0, width]),
        yaxis=dict(visible=False, range=[0, height]),
        height=height,
        width=width,
        autosize=False,
        margin=dict(l=10, r=10, b=10, t=10),
    )
    fig.update_xaxes(showgrid=False)
    fig.update_yaxes(showgrid=False)

    return dcc.Graph(figure=fig, id="graph")

Callbacks

@app.callback(Output("out", "children"), [Input("graph", "selectedData")])
def update_table_selection(selected_data):
    if not selected_data or not selected_data.get("range"):
        return []
    x0, x1 = [int(v) for v in selected_data["range"]["x"]]
    y0, y1 = [int(v) for v in selected_data["range"]["y"]]
    return ", ".join(map(str, [x0, y0, x1, y1]))

I know i can create a heatmap trace and use the clickData for that, but this adds additional data to the figure that i dont need. Is there any other suggested way to do this?