How to Annotate a Point Outside the Plot Itself?

How to Annotate a Point Outside the Plot Itself?

I have a plot like this and want to add text above the line with text 'TODAY'.

I was trying with annotations

annots.append(dict(x='2020-03-29',y=len(df)+1,text='<b>Today<b>', showarrow=False, font=dict(color='black')))

But the output is as such and I want it above the plot and not changing the structure of the plot!

1 Answer

You can do so in three steps:

  1. adjust margins to make room for the text using fig.update_layout(margin=dict())
  2. add line using fig.add_shape()
  3. add text outside plot using add_annotation(yref='paper', y=1.06) where for example y > 1 places the annotation above the plot itself.

See code snippet for details

Plot:

Complete code:

# imports
from plotly.offline import download_plotlyjs, init_notebook_mode, plot, iplot
from IPython.core.display import display, HTML
import plotly.figure_factory as ff
import plotly.graph_objs as go

# setup
display(HTML("<style>.container { width:50% !important; } .widget-select > select {background-color: gainsboro;}</style>"))
init_notebook_mode(connected=True)

#%qtconsole --style vim

# dates
StartA = '2009-01-01'
StartB = '2009-03-05'
StartC = '2009-02-20'

FinishA='2009-02-28'
FinishB='2009-04-15'
FinishC='2009-05-30'

LabelDateA='2009-01-25'
LabelDateB='2009-03-20'
LabelDateC='2009-04-01'

# sample data
df = [dict(Task="Task A", Start=StartA, Finish=FinishA),
      dict(Task="Task B", Start=StartB, Finish=FinishB),
      dict(Task="Task C", Start=StartC, Finish=FinishC)]

# figure
fig = ff.create_gantt(df)

# add annotations
annots =  [dict(x=LabelDateA,y=0,text="Task label A", showarrow=False, font=dict(color='white')),
           dict(x=LabelDateB,y=1,text="Task label B", showarrow=False, font=dict(color='White')),
           dict(x=LabelDateC,y=2,text="Task label C", showarrow=False, font=dict(color='White'))]

# plot figure
fig['layout']['annotations'] = annots


# Step 1 - adjust margins to make room for the text
fig.update_layout(margin=dict(t=150))

# Step 2 - add line
fig.add_shape(type='line',
                x0=LabelDateB,
                y0=0,
                x1=LabelDateB,
                y1=1,
                line=dict(color='black', dash='dot'),
                xref='x',
                yref='paper'
)

# Step 3 - add text with xref set to x
# and yref set to 'paper' which will let you set
# text outside the plot itself by specifying y > 1
fig.add_annotation(dict(font=dict(color="black",size=12),
                            #x=x_loc,
                            x=LabelDateB,
                            y=1.06,
                            showarrow=False,
                            text='<b>Today</b>',
                            textangle=0,
                            xref="x",
                            yref="paper"
                           ))

fig.update_layout(
    title_text="Academic year 2019/2020"
)

fig.show()

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Alexander Ross
Author

Alexander Ross

Alexander Ross has covered the video game industry for a decade, writing deep dives on game design, esports tournaments, VR developments, and gaming culture.