Python Annotation Image Example

[casasvil]

Hi can anyone help me to make the tooltip style that shows the small image in plotly python web
Would it be possible to show it only while hovering the point?
Thanks!

[AIMPED]

Hi @casasvil here some information on how to format the hover text

Hover

[casasvil]

yep, but this example looks more complex than the examples

[AIMPED]

True. If you need support, I suggest providing a MRE

[casasvil]

what is an MRE?

[AIMPED]

How to write a Minimal Reproducible Example (MRE)

Adding a minimal reproducible example to your questions will help attract community members to answer your question. The goal of writing a MRE is to allow other members of the community to run the code on their computers and “reproduce” the error, so that they can best help you. Please make sure that your MRE includes data and that the code is correctly pre-formatted. To preformat, copy and paste the code in your post and then click on </> (Preformatted text), as shown on the image: [pre-for…

[casasvil]

oh well, no just wondering if exactly that code sample was available, i love the style and just want to copy it

[payton-dev]

Hello @casasvil I just made you a sample that gets you pretty close to the supplied screenshot:

from dash import Dash, html, dcc
import plotly.graph_objects as go
import pandas as pd

d = {'Year': [2022,2023], 'Month': ['January','June'], 'A': [1.326, 2.156], 'B': [3.336, 4.625]}
df = pd.DataFrame(data=d)
fig = go.Figure()

fig.add_trace(
    go.Scatter(
        x=df['A'],
        y=df['B'],
        text=df['Month'],
        customdata=df['Year'],
        hovertemplate=
        " Series Identification <br>" +
        "   <b>Year</b>  %{customdata} <br>" +
        " Point Identification <br>" +
        "   <b>Month</b>  %{text} <br>"
        "  Point Values <br>" +
        "     <b>A</b>: %{x} <br>" +
        "     <b>B</b>: %{y} " +
        "<extra></extra>",
    )
)

fig.update_traces(mode='markers')


fig.update_layout(
    hoverlabel=dict(
        bordercolor='pink',
        font_color='black', 
        bgcolor='white') 
)


app = Dash(__name__)

app.layout = html.Div(dcc.Graph(figure=fig))

if __name__ == "__main__":
    app.run_server(debug=True)

I’m not finding a way to center the text inside the hover so I just tossed some spaces in to emulate it. You can remove them if you don’t care about the centering. If you keep the spaces it may not look proper depending on what type of data you’re displaying and the page layout.

[casasvil]

beautiful, thank you!