Black Lives Matter. Please consider donating to Black Girls Code today.

[Plotly Express] scatter plot hover_name -> Unable to open the url

Hello,
I am trying to plot scatter plot using plotly express px.scatter

I am using the arg hover_name = `some column with https://xxxxx
I can see the link by hovering on the point,

I am trying to achieve either of the following features

  1. hover over the point and view the image directly in the hover box itself
  2. Hover over the point so the image is shown below the scatter plot
  3. Hover over the point so i can click the link to view the image

currently my code looks like this

    fig = px.scatter(data_frame=agg,
                     x = agg["DateTime"],
                     y = agg["Score"],
                     color=agg["x"],
                     hover_name=agg["link"],
                     height=600,
                     width=2500,
                     render_mode="webgl",
                     color_continuous_scale=px.colors.sequential.Inferno,
                     title=" Score Distribution")
    SCATTER_PLOT_LAYOUT = go.layout.XAxis(anchor='y',
                          domain=[0.0, 0.7363], 
                            rangeselector=dict(
                                buttons=list([
                                    dict(count=1,
                                         label="1m",
                                         step="month",
                                         stepmode="backward"),
                                    dict(count=6,
                                         label="6m",
                                         step="month",
                                         stepmode="backward"),
                                    dict(count=1,
                                         label="YTD",
                                         step="year",
                                         stepmode="todate"),
                                    dict(count=1,
                                         label="1y",
                                         step="year",
                                         stepmode="backward"),
                                    dict(step="all")
                                ])
                            ),
                            rangeslider=dict(
                                visible=True
                            ),
                            type="date"
                            )
    fig.update_layout(xaxis=SCATTER_PLOT_LAYOUT)

and scatter plot looks like

I added clickmode='even+select to select and used html.Img(src=url) to view the image. But i’m still stuck in selecting the range in y axis.