Add hyperlink to image

📊 Plotly Python
,
1

Hi

Is there any way to assign a hyperlink to an imported image?

2

Have you tried to wrap the image tag with a link tag?

Oh wait are you talking about Dash or a Plotly figure?

3

Thanks dear @RenaudLN for your contribution.

I’m using plotly.Python and I have imported an image using below code lines:

fig.add_layout_image(_go.layout.Image(source='data:image/png;base64,{}'.format(plotly_logo.decode()),
                                          #xref="paper", yref="paper",
                                          x=-0.085, y=.90,
                                          sizex=0.15, sizey=0.15,
                                          sizing = 'contain',
                                          xanchor="left", yanchor="bottom"))
4

To my knowledge you can’t embed links in Plotly figures.
You could do something in a Dash app though.

1 Like
5

Hi @Bijan

A sneaky workaround would be to add a text annotation to your figure and placing it right above your image. Plotly figures support HTML, you can add a link using <a> tag and increase the font size so that it covers your entire image.

image
image1167×388 8.88 KB

Later we can hide the annotation by setting its opacity to 0.

df = px.data.gapminder().query("country=='India'")
fig = px.bar(df, x="year", y="lifeExp")

fig.add_layout_image(go.layout.Image( 
            source="https://upload.wikimedia.org/wikipedia/commons/thumb/3/37/Plotly-logo-01-square.png/1200px-Plotly-logo-01-square.png",
            x=-0.085, y=1,
            sizex=0.15, sizey=0.15,
            sizing = 'contain',
            xanchor="left", yanchor="bottom"))
fig.add_annotation(
    text="<a href='https://community.plotly.com/t/add-hyperlink-to-image/64248' style='opacity:0'>link</a>",
    font=dict(size=50),
    x=-0.065, y=1,
    showarrow=False,
    xref="paper", yref="paper",                                         
    xanchor="left", yanchor="bottom"
)
fig.show()

plot

4 Likes
6

dear @atharvakatre That was really cool and I enjoy that. Grand bro :+1:

1 Like