Annotation not showing on dash (dcc.Graph)

Dash Python
1

In dash I’m trying to add annotation for the last observation in time series.
I follow plotly example found in https://plot.ly/python/line-charts/#label-lines-with-annotations

The problem is that the annotation does not show up, I just see the graph only.

Many thank sin advance for suggestions.

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

GDP = {'name': 'GDP_yoy',
 'x': [2012, 2013, 2014, 2015, 2016],
 'y': [103.5, 101.3, 100.7, 97.2, 99.8]}


def make_annotation_item(x, y):
    return dict(xref='paper', yref='paper',
                x=x, y=y,
                font=dict(color='black'),
                xanchor='left', 
                yanchor='middle',
                text=f'Annotation: {y} ',
                showarrow=False)

ANNOTATIONS = [make_annotation_item(x=GDP['x'][-1], y=GDP['y'][-1])]

app.layout = html.Div(children=[     
    dcc.Graph(
        id='example-graph',
        figure={
            'data': [GDP],
            'layout': {
                 'xaxis': dict(range=[2010, 2020]),
                 'annotations': ANNOTATIONS              
            }
        }
    )
])

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

@epo7 - It looks like you are using paper coordinates (xref: 'paper') instead of data coordinates. paper coordinates are relative to the plot canvas (between -0.5 and 1.5). Instead, set xref: 'x' and yref: 'y' so that the coordinates are relative to the axes.

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

GDP = {'name': 'GDP_yoy',
 'x': [2012, 2013, 2014, 2015, 2016],
 'y': [103.5, 101.3, 100.7, 97.2, 99.8]}


def make_annotation_item(x, y):
    return dict(xref='x', yref='y',
                x=x, y=y,
                font=dict(color='black'),
                xanchor='left',
                yanchor='middle',
                text='Annotation: {} '.format(y),
                showarrow=False)

ANNOTATIONS = [make_annotation_item(x=GDP['x'][-1], y=GDP['y'][-1])]

app.layout = html.Div(children=[
    dcc.Graph(
        id='example-graph',
        figure={
            'data': [GDP],
            'layout': {
                 'xaxis': dict(range=[2010, 2020]),
                 'annotations': ANNOTATIONS
            }
        }
    )
])

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

image

3

I am trying to make multiple annotations in a chart, i want the annotations to have arrows with auto adjusted positions. But arrows dont come up even if i keep showarrow=True, and the annotations overlap as well.

def make_annotation_item(x, y):
    return dict(xref='x', yref='y',
                x=x, y=y,
                font=dict(color='black'),
                xanchor='left',
                yanchor='middle',
                text='{}'.format(y),
                showarrow=True,
                arrowhead=1,
                ax=0,
                ay=-40)


annotations=[]
annotations = [make_annotation_item(x=ds_annot['time'][1],y=ds_annot['annotation'][1])]
4

Hm, that’s odd. Can you share a screenshot?

5

Hi Thanks for your reply, it worked actually the arrow wasn’t showing because I was giving incorrect arrow pointers, so arrow was basically there but was so small that wasn’t visible. So I just fixed the tail position and then it started showing up.

1 Like