Bar Chart - Stacking

BarChart stacking options: standard, normalized (expand) and diverging stack offsets, multiple stack groups, and horizontal stacked bars.

Overview

Series sharing a stack id render stacked. stackOffset controls the arithmetic: 'none' (default, accumulate from zero), 'expand' (normalized to 100%), or 'diverging' (positives above zero, negatives below). Different stack ids render as side-by-side stack groups.

series=[
    {'data': [40, 35], 'stack': 'g', 'stackOffset': 'expand'},
    {'data': [30, 25], 'stack': 'g', 'stackOffset': 'expand'},
]

Standard stack (offset: none)

Default stacking — bars accumulate from zero.

# File: docs/barchart_stacking/normal_example.py

from dash_mui_charts import BarChart

categories = ['Q1', 'Q2', 'Q3', 'Q4']

component = BarChart(
    id='bar-stack-normal',
    series=[
        {'data': [40, 35, 50, 45], 'label': 'Product A', 'stack': 'revenue',
         'color': '#1976d2'},
        {'data': [30, 25, 35, 40], 'label': 'Product B', 'stack': 'revenue',
         'color': '#42a5f5'},
        {'data': [20, 30, 25, 20], 'label': 'Product C', 'stack': 'revenue',
         'color': '#90caf9'},
    ],
    xAxis=[{'data': categories, 'scaleType': 'band'}],
    yAxis=[{'label': 'Revenue ($k)'}],
    grid={'horizontal': True},
    height=320,
)

:defaultExpanded: false :withExpandedButton: true

Normalized stack (offset: expand)

All bars fill to 100% — shows proportions rather than absolute values.

# File: docs/barchart_stacking/expand_example.py

from dash_mui_charts import BarChart

categories = ['Q1', 'Q2', 'Q3', 'Q4']

component = BarChart(
    id='bar-stack-expand',
    series=[
        {'data': [40, 35, 50, 45], 'label': 'Product A', 'stack': 'revenue',
         'stackOffset': 'expand', 'color': '#e65100'},
        {'data': [30, 25, 35, 40], 'label': 'Product B', 'stack': 'revenue',
         'stackOffset': 'expand', 'color': '#ff9800'},
        {'data': [20, 30, 25, 20], 'label': 'Product C', 'stack': 'revenue',
         'stackOffset': 'expand', 'color': '#ffcc80'},
    ],
    xAxis=[{'data': categories, 'scaleType': 'band'}],
    grid={'horizontal': True},
    height=320,
)

:defaultExpanded: false :withExpandedButton: true

Diverging stack

Positive values above zero, negative below — useful for sentiment or net scores.

# File: docs/barchart_stacking/diverging_example.py

from dash_mui_charts import BarChart

categories = ['Q1', 'Q2', 'Q3', 'Q4']

component = BarChart(
    id='bar-stack-diverging',
    series=[
        {'data': [20, -10, 30, -5], 'label': 'Gains', 'stack': 'net',
         'stackOffset': 'diverging', 'color': '#4caf50'},
        {'data': [-15, 25, -20, 35], 'label': 'Losses', 'stack': 'net',
         'stackOffset': 'diverging', 'color': '#f44336'},
    ],
    xAxis=[{'data': categories, 'scaleType': 'band'}],
    grid={'horizontal': True},
    height=320,
)

:defaultExpanded: false :withExpandedButton: true

Multiple stack groups

Different stack IDs create separate stacked groups side by side.

# File: docs/barchart_stacking/groups_example.py

from dash_mui_charts import BarChart

categories = ['Q1', 'Q2', 'Q3', 'Q4']

component = BarChart(
    id='bar-stack-groups',
    series=[
        {'data': [40, 35, 50, 45], 'label': '2024 Online',
         'stack': 'year2024', 'color': '#1565c0'},
        {'data': [20, 15, 25, 30], 'label': '2024 Retail',
         'stack': 'year2024', 'color': '#42a5f5'},
        {'data': [35, 40, 45, 55], 'label': '2025 Online',
         'stack': 'year2025', 'color': '#2e7d32'},
        {'data': [25, 20, 30, 35], 'label': '2025 Retail',
         'stack': 'year2025', 'color': '#66bb6a'},
    ],
    xAxis=[{'data': categories, 'scaleType': 'band'}],
    yAxis=[{'label': 'Sales ($k)'}],
    grid={'horizontal': True},
    height=350,
)

:defaultExpanded: false :withExpandedButton: true

Horizontal stacked

Stacked bars in horizontal layout with rounded corners.

# File: docs/barchart_stacking/horizontal_example.py

from dash_mui_charts import BarChart

component = BarChart(
    id='bar-stack-horizontal',
    series=[
        {'data': [60, 45, 70, 55], 'label': 'Completed', 'stack': 'tasks',
         'color': '#4caf50'},
        {'data': [20, 25, 15, 30], 'label': 'In Progress', 'stack': 'tasks',
         'color': '#ff9800'},
        {'data': [10, 15, 5, 10], 'label': 'Blocked', 'stack': 'tasks',
         'color': '#f44336'},
    ],
    yAxis=[{'data': ['Team A', 'Team B', 'Team C', 'Team D'],
            'scaleType': 'band'}],
    layout='horizontal',
    borderRadius=4,
    grid={'vertical': True},
    height=280,
)

:defaultExpanded: false :withExpandedButton: true

Related pages

• Basic · Dataset Mode · Interaction · Reference Lines · Pro Features

Source: /barchart-stacking