Black Lives Matter. Please consider donating to Black Girls Code today.

Stacked bar char


I am trying to create a stacked bar chart and I am really struggling.

The chart is for capturing billing information about servers in different environments.

so for example:


Each environment will have one or more servers and each server has a cost associated.

I want the chart to show environment on the xaxis, with the bar for the env contain a stack bar for each servers cost, with the all stacks adding up to the total cost of the environment.

The issue I am having is that, it seems the way plotly wants the information isnt by BAR but by for each stack in each bar,

so for example, if the data was organised as below, I cannot get it to create a stack chart.

env = {'qa': [[20, 14, 23], ['s1','s2','s3']], 'prd': [[30, 40, 50], ['p1','p2','p3']], 'dev': [[3, 4, 5], ['d1','d2','d3']]}

Where the key is the environment name
the first list is the costs
second list is server name

Any help here would be appreciated.

I thought maybe give a better example. Given the table below

QA 20 14 23
STG 55 61 80
PRD 105 111 130
DEV 5 3

I wanted to create a stack like this


figured it out finally, just for future reference - the code example is below:

import plotly.graph_objects as go

env = {
    'qa': [[20, 14, 23], ['s1', 's2', 's3']],
    'prd': [[30, 40, 50], ['p1', 'p2', 'p3']],
    'dev': [[3, 4, 5], ['d1', 'd2', 'd3']]

trace_list = []

for env, cluster in env.items():
    for cost in cluster[0]:
        name_index = cluster[0].index(cost)
        name = cluster[1][name_index]

            "meta": {
                "columnNames": {
                    "y": name
            "name": "%{meta.columnNames.y}",
            "type": "bar",
            "x": [env],
            "y": [cost],
            "hoverinfo": "name+x",
            "orientation": "v"

my_layout = {
    "xaxis": {
        "title": {
            "text": "Environment"
        "autorange": True
    "yaxis": {
        "type": "linear",
        "title": {
            "text": "Costs in $"
        "autorange": True
    "barmode": "stack",
    "autosize": True,

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