Plotly: How to add data labels to stacked bar charts using go.Bar?

Viewed 4678

I have a stacked grouped bar chart, and I want to get the data labels for each section of each bar on the graph.

My chart is made as below:

stackData = {
    "Leaders Now":[.52, .57, .38, .48],
    "Bottom Now": [.20,  .27, .19, .18],
    # Use differece
    "Leaders Plan": [.17, .06, .12,  .16],
    "Bottom Plan":[.15,.12,.09,.12],
    "labels": [
        "Revenue",
        "Cost",
        "Quality",
        "Flexibility"
    ]
}

fig3 = go.Figure(
    data=[
        go.Bar(
            name="Leaders Now",
            x=stackData["labels"],
            y=stackData["Leaders Now"],
            offsetgroup=0,
            marker_color = '#024a70'
        ),
        go.Bar(
            name="Leaders Plan",
            x=stackData["labels"],
            y=stackData["Leaders Plan"],
            offsetgroup=0,
            base=stackData["Leaders Now"],
            marker_color = '#051c2c'
        ),
        go.Bar(
            name="Bottom Now",
            x=stackData["labels"],
            y=stackData["Bottom Now"],
            offsetgroup=1,
            marker_color = '#abe5f0'
        ),
        go.Bar(
            name="Bottom Plan",
            x=stackData["labels"],
            y=stackData["Bottom Plan"],
            offsetgroup=1,
            base=stackData["Bottom Now"],
            marker_color = '#74d0f0'
        )
    ],
    layout=go.Layout(
        title="Use Cases",
        yaxis_title="% of Companies"
    )
)
fig3.show()

enter image description here

I just want the % values of each item on the bars, as data labels. This was easy with plotly express but not sure why its not working with something such as

fig3.update_traces(texttemplate='%{text:.0%}',textposition='auto')

Thank you!

1 Answers

You'll just have to specify the text attribute for each go.Bar, like:

go.Bar(
    name="Leaders Now",
    x=stackData["labels"],
    y=stackData["Leaders Now"],
    offsetgroup=0,
    marker_color = '#024a70',
    text = stackData["Leaders Now"]
)

Plot:

enter image description here

Complete code:

import plotly.graph_objects as go
import pandas as pd

stackData = {
    "Leaders Now":[.52, .57, .38, .48],
    "Bottom Now": [.20,  .27, .19, .18],
    # Use differece
    "Leaders Plan": [.17, .06, .12,  .16],
    "Bottom Plan":[.15,.12,.09,.12],
    "labels": [
        "Revenue",
        "Cost",
        "Quality",
        "Flexibility"
    ]
}

# stackData = pd.DataFrame(stackData)

fig3 = go.Figure(
    data=[
        go.Bar(
            name="Leaders Now",
            x=stackData["labels"],
            y=stackData["Leaders Now"],
            offsetgroup=0,
            marker_color = '#024a70',
            text = stackData["Leaders Now"]
        ),
        go.Bar(
            name="Leaders Plan",
            x=stackData["labels"],
            y=stackData["Leaders Plan"],
            offsetgroup=0,
            base=stackData["Leaders Now"],
            marker_color = '#051c2c',
            text= stackData["Leaders Plan"]
        ),
        go.Bar(
            name="Bottom Now",
            x=stackData["labels"],
            y=stackData["Bottom Now"],
            offsetgroup=1,
            marker_color = '#abe5f0',
            text = stackData["Bottom Now"]
        ),
        go.Bar(
            name="Bottom Plan",
            x=stackData["labels"],
            y=stackData["Bottom Plan"],
            offsetgroup=1,
            base=stackData["Bottom Now"],
            marker_color = '#74d0f0',
            text = stackData["Bottom Plan"]
        )
    ],
    layout=go.Layout(
        title="Use Cases",
        yaxis_title="% of Companies"
    )
)

f3 = fig3.full_figure_for_development(warn=False)
fig3.update_traces(texttemplate='%{text:.2%}', textposition='inside')

fig3.show()
Related