Move Annotation Below Arrow

Dash Python
1

Hello,

I have been banging my head against the wall to figure something really simple out. I was hoping you wonderful people could assist me.

I am annotating a line chart in Plotly Express with a little text and arrow callout. One of the annotations is written over the line and can’t be read easily. All I am trying to do is rotate the arrow to be pointing up and the text to move along with it to be at the end of the non pointing side of the arrow.

Here is an example of my code:

#Load library and data
import plotly.express as px
df = px.data.stocks()

#Define parameters
max_num= df['GOOG'].max()
min_num= df['GOOG'].min()
max_date = df[df['GOOG']==max_num]['date'].values[0]
min_date = df[df['GOOG']==min_num]['date'].values[0]

#Make plot
fig = px.line(df, x='date', y="GOOG")
#Add annotations to plot
fig.add_annotation(text="Max", x=max_date, y=max_num, arrowhead=1, showarrow=True)
fig.add_annotation(text="Min", x=min_date, y=min_num, arrowhead=1, showarrow=True)

fig.update_layout(yaxis_range=[0.75,1.25])
fig.show()

I have been looking through the documentation and examples online, but have not been able to find anything helpful. Can someone point me in the right direction?

Thank you!

2

Morning!
It looks like you can implement some of the 3D options to do this.

import plotly.express as px
df = px.data.stocks()

#Define parameters
max_num= df['GOOG'].max()
min_num= df['GOOG'].min()
max_date = df[df['GOOG']==max_num]['date'].values[0]
min_date = df[df['GOOG']==min_num]['date'].values[0]

#Make plot
fig = px.line(df, x='date', y="GOOG")
#Add annotations to plot
fig.add_annotation(text="Max", x=max_date, y=max_num, arrowhead=1, showarrow=True)
fig.add_annotation(text="Min", x=min_date, y=min_num, arrowhead=1, showarrow=True, ay=180)

fig.update_layout(yaxis_range=[0.75,1.25])
fig.update_traces(textposition='top center')
fig.show()

If you look at https://plotly.com/python/text-and-annotations/#3d-annotations There are a few options for ay and ax (im guessing they stand for arrow x and arrow y)

I added it to your code, the arrow is a bit extreme now but you get the idea haha.

Hope this helps!

2 Likes
3

Thanks @tphil10 ! I modified the ay argument to a smaller number and it worked perfectly! Appreciate the help!