Plotly: How do I annotate graph object bar chart in a combination chart?

Question

I have a combination chart of a line and a bar chart. Plotly is allowing me to annotate either the bar chart or the line chart. How can I annotate both?

fig_time_series = go.Figure(
            go.Scatter(
                x=errors_df["date"],
                y=errors_df["count_cumsum"],
                mode="lines+markers+text",
                text=errors_df["count_cumsum"],
                textposition="top center",
                name="Cumulative errors"
            )
        )
        fig_time_series.update_layout(title="Error Trend")

        fig_time_series.add_trace(
            go.Bar(
                x=errors_df["date"],
                y=errors_df["count"],
                text=errors_df["count"],
                name="Monthly errors",
            )
        )

This gives me -

Kindly requesting help with annotating the bar chart as well.

I've put together a suggstion based on some random numbers. Next time you post a question, please consider including a sample of your data like [this](https://stackoverflow.com/questions/63163251/pandas-how-to-easily-share-a-sample-dataframe-using-df-to-dict/63163254#63163254) — vestland, Apr 09 '21 at 19:00

score 2 · Answer 1 · answered Apr 09 '21 at 18:55

Just include text and textposition in go.Bar:

fig.add_traces(go.Bar(x=df['x'], y = df['y1'],
                      text = df['y2'],
                      textposition="outside"
                      ))

Other options for textposition are:

['inside', 'auto', 'none']

And the default is none as you've already discovered.

Complete code:

# import plotly.plotly as py
import plotly.graph_objs as go
# from plotly.offline import download_plotlyjs, init_notebook_mode, plot, iplot


import pandas as pd
import numpy as np

N = 10
x = np.linspace(1, 10, N)
y1 = np.random.randint(low=1, high=3, size=10).tolist()
y2 = np.cumsum(y1)
df = pd.DataFrame({'x': x, 'y1': y1, 'y2':y2})

fig = go.Figure()
fig.add_traces(go.Bar(x=df['x'], y = df['y1'],
                      text = df['y2'],
                      textposition="outside"
                      ))

fig.add_traces(go.Scatter(x=df['x'], y = df['y2'],
                          mode="lines+markers+text",
                          textposition="top center",
                          text = df['y2']))
f=fig.full_figure_for_development(warn=False)
fig.show()

Understood the mistake. Thank you. – DarkFantasy Apr 10 '21 at 08:45 — DarkFantasy, Apr 10 '21 at 08:45

AS11 · Accepted Answer · 2021-04-09T19:14:31.823

By setting the textposition in the go.Bar as one of ['inside', 'outside', 'auto', 'none'], I was able to get the text values for the Bar Graph to show up. Using sample code this is what it looks like:

import plotly.graph_objects as go

fig = go.Figure()

fig.add_trace(
    go.Scatter(
        x=[0, 1, 2, 3, 4, 5],
        y=[1.5, 1, 1.3, 0.7, 0.8, 0.9],
        mode="lines+markers+text",
        text = ['a','a','a','a','a','a'],
        textposition= 'top center'
    ))

fig.add_trace(
    go.Bar(
        x=[0, 1, 2, 3, 4, 5],
        y=[1, 0.5, 0.7, -1.2, 0.3, 0.4],
        text = ['b','b','b','b','b', 'b'],
        textposition = 'auto' # it must be one of: ['inside', 'outside', 'auto', 'none']
    ))


fig.show()

and the actual graph looks like:

Plotly: How do I annotate graph object bar chart in a combination chart?

2 Answers2

Complete code: