Adding annotations to a bar graph in Plotly

Question

I'm looking to add some annotations to my bar graph I created in Plotly. I simply want to show the data value over each bar without the need of hovering over it.

Most of the data manipulation has been done and my two main data frames have been created:

In [1]: df_MMCAlist
Out[1]:
   List Date  Total
0    2015-01    131
1    2015-02    102
2    2015-03    116
3    2015-04    104
4    2015-05    105
5    2015-06     87
6    2015-07     68
7    2015-08     58
8    2015-09     73
9    2015-10     76
10   2015-11     74
11   2015-12     67

In [2]:df_MMCAsale
Out[2]: 
   Sale Date  Total
0    2015-01     70
1    2015-02     42
2    2015-03     92
3    2015-04     36
4    2015-05     49
5    2015-06     47
6    2015-07     34
7    2015-08     37
8    2015-09     42
9    2015-10     39
10   2015-11     42
11   2015-12     32

Here's my graph:

bar_MMCAlist = go.Bar(
    x=df_MMCAlist['List Date'],
    y=df_MMCAlist['Total'],
    name='Listings',
    marker=dict(
        color='rgb(242,137,17)'
    )
)

bar_MMCAsale = go.Bar(
    x=df_MMCAsale['Sale Date'],
    y=df_MMCAsale['Total'],
    name='Sales',
    marker=dict(
        color='rgb(0,153,0)'
    )
)

data = [bar_MMCAlist, bar_MMCAsale]
layout = go.Layout(
    barmode='group',
    xaxis=dict(nticks=13),
)

fig = go.Figure(data=data, layout=layout)

plot_url = py.plot(fig, filename = 'Yearly Performance')

<a href="https://plot.ly/~ryebooks/14/" target="_blank" title="Listings vs Sales" style="display: block; text-align: center;"><img src="https://plot.ly/~ryebooks/14.png" alt="Listings vs Sales" style="max-width: 100%;width: 1620px;"  width="1620" onerror="this.onerror=null;this.src='https://plot.ly/404.png';" /></a>
    <script data-plotly="ryebooks:14"  src="https://plot.ly/embed.js" async></script>

score 3 · Accepted Answer · edited May 23 '17 at 12:23

By working off of Sam's answer and referencing 33873298, I was able to create some annotations.

Creating the annotations:

# Specify the y-position of the labels
y1 = df_MMCAlist['Total']
y2 = df_MMCAsale['Total']

xcoord = df_MMCAsale['Sale Date'] # Specify the x-position of the labels

annotationsList = [dict(
                x=xi,
                y=yi,
                text=str(yi),
                xanchor='right',
                yanchor='bottom',
                showarrow=False,
            ) for xi, yi in zip(xcoord, y1)]

annotationsSale = [dict(
                x=xi,
                y=yi,
                text=str(yi),
                xanchor='left',
                yanchor='bottom',
                showarrow=False,
            ) for xi, yi in zip(xcoord, y2)]

annotations = annotationsList + annotationsSale

Now you can add "annotations" to your layout variable:

layout = go.Layout(
    barmode='group',
    annotations=annotations,
    xaxis=dict(nticks=13),
)

Due to the x-axis being dates/ string, I was unable to position the annotations better (e.g. I couldn't take advantage of using the +0.2 and -0.2 utilized in 33873298). The current code I have however solves my problem.

Sam · Answer 2 · 2016-02-25T22:42:21.580

The answer you are looking for is here: https://plot.ly/python/text-and-annotations/

For your code it would be something like:

bar_MMCAsale = go.Bar(
    x=df_MMCAsale['Sale Date'],
    y=df_MMCAsale['Total'],
    name='Sales',
    text = df_MMCAsale['Total'],
    textposition='top right',
    textfont=dict(
        family='sans serif',
        size=18,
        color='#1f77b4'
    )
    marker=dict(
        color='rgb(0,153,0)'
    )
)

If you leave the 'texposition' arg blank, I believe you only get text on the hover-over

Edit: I guess the textposition arg does not work for a bar graph. I've nominally tested something like the code below, which should work for a bar.

bar_MMCAsale = go.Bar(
    x=df_MMCAsale['Sale Date'],
    y=df_MMCAsale['Total'],
    name='Sales',
    marker=dict(
        color='rgb(0,153,0)'
    )
)
layout = go.Layout(
    showlegend=False,
    annotations=[
        dict(
            x=xpos,
            y=ypos,
            xref='x',
            yref='y',
            text=str(ypos),
            showarrow=True,
            arrowhead=7,
            ax=0,
            ay=-40
    ) for xpos, ypos in zip(df_MMCAsale['Sale Date'], df_MMCAsale['Total'])
    ]
)

You can edit the formatting as you see fit. Let me know if this works.

Adding annotations to a bar graph in Plotly

2 Answers2

Linked