How to display an image in the hover tag upon hovering over a point in a plotly plot

Using Streamlit
1

I have a dataset containing image features and the local path of these images. Each row corresponds to an image. I have plotted a 3D Scatterplot using plotly graph_objects based on these features and wish to display the image that each point in the scatterplot corresponds to upon hovering. I have tried looking through the plotly documentation but it seems like this can be achieved only using dash. I have also tried using the html image tag as the hovertemplate, but to no avail. It is being interpreted as an ordinary string. How do I get this done in Streamlit?

2

To achieve the desired functionality of displaying images upon hovering over points in a 3D scatterplot in Streamlit, you can use the plotly library along with Streamlit’s write or pyplot functions.

You can look up the below code for reference:
import plotly.graph_objects as go
import streamlit as st

Sample data

image_paths = [“path/to/image1.jpg”, “path/to/image2.jpg”, “path/to/image3.jpg”]
x = [1, 2, 3]
y = [4, 5, 6]
z = [7, 8, 9]

Create trace for scatterplot

scatter_trace = go.Scatter3d(
x=x,
y=y,
z=z,
mode=“markers”,
hovertemplate=“X: %{x}
Y: %{y}
Z: %{z}
”,
text=image_paths,
)

Create layout

layout = go.Layout(scene=dict(aspectmode=“data”))

Create figure

figure = go.Figure(data=[scatter_trace], layout=layout)

Render the figure using Streamlit

st.plotly_chart(figure)

3

This doesn’t work for me.
Would love to know if anyone has a different approach.

1 Like
4

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.