Hi, in fact , I would like to show local images that are relevant to these points. And I succeeded to show Web images by their URL. It seems that I can’t do it as in HTML by src.
Here is by code. I am using a local csvf file where the absolu path of images are saved in IMG_URL.
data_path = Path(r"C:\Users\wyang\data\2021_Stockholm\captures_persistent\MAST\04735fc05dce11ec95d28c8d28aae875\data_dash.csv")
df = pd.read_csv(data_path, header=0, index_col=0)
fig = go.Figure(data=[
go.Scatter(
x=df["x_f"],
y=df["y_f"],
mode="markers",
marker=dict(
colorscale='viridis',
# color=df["MW"],
size=df["concentration"],
colorbar={"title": "Molecular<br>Weight"},
line={"color": "#444"},
reversescale=True,
sizeref=45,
sizemode="diameter",
opacity=0.8,
)
)
])
# turn off native plotly.js hover effects - make sure to use
# hoverinfo="none" rather than "skip" which also halts events.
fig.update_traces(hoverinfo="none", hovertemplate=None)
app = Dash(__name__)
fig.update_layout(
xaxis=dict(title='Log P'),
yaxis=dict(title='pkA'),
plot_bgcolor='rgba(255,255,255,0.1)'
)
app.layout = html.Div([
dcc.Graph(id="graph-basic-2", figure=fig, clear_on_unhover=True),
dcc.Tooltip(id="graph-tooltip"),
])
@app.callback(
Output("graph-tooltip", "show"),
Output("graph-tooltip", "bbox"),
Output("graph-tooltip", "children"),
Input("graph-basic-2", "hoverData"),
)
def display_hover(hoverData):
if hoverData is None:
return False, no_update, no_update
# demo only shows the first point, but other points may also be available
pt = hoverData["points"][0]
bbox = pt["bbox"]
num = pt["pointNumber"]
df_row = df.iloc[num]
img_src = df_row['IMG_URL']
name = df_row['x_f']
form = df_row['y_f']
children = [
html.Div([
html.Img(src=img_src, style={"width": "100%"}),
html.H2(f"{name}", style={"color": "darkblue"}),
html.P(f"{form}", style={"color": "darkblue"}),
], style={'width': '200px', 'white-space': 'normal'})
]
return True, bbox, children
