Black Lives Matter. Please consider donating to Black Girls Code today.
Learn how to use COVID-19 data in open source Dash apps. Register for the Sept 23rd webinar with IQT!

Show floating annotation which doesn't skim chart area

hi there,

I’m trying to generate an image from a chart and want to show max and minimum points.

Created a custom annotation following a tutorial and here’s how it’s displayed

it moved outside and shifted inside chart area. Since it’s min/max points it’s dynamic and can be anywhere. Is there a way to make it floating show it’s always shown inside of chart area? Here’s my code:

fig.add_annotation(
    x=x[i],
    y=y[i],
    xref="x",
    yref="y",
    text=text,
    showarrow=True,
    font=dict(
        family="Courier New, monospace",
        size=12,
        color="#ffffff"
        ),
    align="center",
    ax=20,
    ay=30,
    bordercolor="#c7c7c7",
    borderwidth=2,
    borderpad=4,
    bgcolor="#ff7f0e",
    opacity=0.8
)

Maybe there’s a way to show standard tooltips without adding custom annotations like in this image? (but show for 2 or more points)

Thanks for help!

@nggix

To ensure that the leftmost or rightmost positioned annotations do not push the plot to the right or to the left, you have to set xanchor and yanchor for those annotations:

import numpy as np
import plotly.graph_objs as go


N=10
y= [0.70, 0.388, 0.17, 0.18, 0.64993566,
       0.9, 0.82 , 0.72, 0.6, 0.7,
       0.7, 0.83 , 0.53, 1, 0.7]
fig=go.Figure(go.Scatter(x=np.linspace(0,1, 15),
                         y=y,
                         mode='lines', 
                         fill='tozeroy',
                         fillcolor='lightblue',
                         line_color='blue',
                    ))
fig.update_layout(width=600, height=400)
fig.add_annotation(x=0.92857143,
    y=1,
    xref="x",
    yref="y",
    text='My right annotation',
    showarrow=False,
    xanchor='right',
    yanchor='bottom')
fig.add_annotation(x=0,
    y=0.7,
    xref="x",
    yref="y",
    text='My left annotation',
    showarrow=False,
    xanchor='left',
    yanchor='bottom')

your solution helped, thanks a lot!