Plotly Stacked Bar Chart 文本注释问题

Question

So, I have this simplified data frame and I'm using plotly.graph_objects to plot a stacked bar chart with text annotations. I got the text as I wanted from the Salary column but I can't get the same for the Age column where the values are significantly lower. I would like these annotations to be the same size and on top of each bar. How can I get the text annotations to be visible for the Age column as well?

Please find my code below:

data = {'Name':['Tom', 'Nick', 'Jack'],
        'Age':[18, 21, 19],
        'Salary':[500, 700, 900]}
df_new=pd.DataFrame(data)

fig = go.Figure(go.Bar(x = df_new["Name"],
                       y = df_new["Age"],name='Age',text=df_new["Age"],
                       textposition='outside'))
fig.add_bar(x = df_new["Name"],
            y = df_new["Salary"],name='Salary',text=df_new["Salary"],
            textposition='outside')
fig.update_layout(barmode='stack',
                  title = 'Age - Salary',
                  xaxis_title="Name",
                  yaxis_title="Age / Salary")

Thanks in advance!

Answer 1

I think you have to choose from 2 possible solutions. First of all, by using the barmode = stack argument, you are stacking and thus summing the values of age and salary. The height of bars will be age + salary , such that the height of Tom's bar will be 500 + 18 = 518 . I'd advise against this, as the height should reflect the callout value in my opinion.

---

Solution 1 - grouped bars

This solution is based on changing the barmode to barmode = group . This will make two separate bars, which have their own callout and heights reflecting their values. I've also added the width argument to make prettier aspect ratios.

fig = go.Figure()
fig.add_bar(x = df_new["Name"],
            y = df_new["Age"],name='Age',text=df_new["Age"],
            width = [0.3]*len(df_new),
            )

fig.add_bar(x = df_new["Name"],
            y = df_new["Salary"],name='Salary',text=df_new["Salary"],
            width = [0.3]*len(df_new)
            )
fig.update_layout(barmode='group',
                  title = 'Age - Salary',
                  xaxis_title="Name",
                  yaxis_title="Age / Salary"
                  )
fig.update_traces(
    textposition='outside'
)
fig.update_yaxes(range=[0,1000])

---

Solution 2 - add secondary y-axis

I prefer this solution, as the relative size of the two categories can each be scaled to their own domain; which makes the chart a lot more readable. This uses make_subplots to create two axes and the secondary_y argument. I've made both bars visible by playing around with the widths and ranges of the axes.

Based on the data you'd have to manually rescale to your liking. You could also incorporate opacity for look-through bars, but you'd still have the risk of overlapping data callouts.

from plotly.subplots import make_subplots

fig = make_subplots(specs=[[{"secondary_y": True}]])
fig.add_bar(
    x=df_new["Name"],
    y=df_new["Age"],
    name="Age",
    text=df_new["Age"],
    width=[0.3] * len(df_new),
    secondary_y=True,
    textposition="outside"
)
fig.add_bar(
    x=df_new["Name"],
    y=df_new["Salary"],
    name="Salary",
    text=df_new["Salary"],
    width=[0.5] * len(df_new),
    secondary_y=False,
    textposition="outside"
)

fig.update_yaxes(range=[0, 1000], title='Salary', secondary_y=False)
fig.update_yaxes(range=[0, 45], title='Age', secondary_y=True)
fig.update_layout(title="Age and Salary", xaxis_title="Name")