Bar Chart - Basic

BarChart basics for Dash: multi-series vertical, stacked and horizontal bars, bar labels, rounded corners, custom colors and negative values.

Overview

Vertical and horizontal bar charts for Plotly Dash, wrapping MUI X Charts' BarChart. Community features — bars, stacking, bar labels, dataset mode, reference lines, click events — need no license. Pro features (zoom, slider, toolbar) require a MUI X Pro licenseKey; the component automatically switches to BarChartPro when Pro features are used.

from dash_mui_charts import BarChart

BarChart(
    id='my-bar',
    series=[{'data': [4, 3, 5], 'label': 'Sales', 'color': '#1976d2'}],
    xAxis=[{'data': ['Q1', 'Q2', 'Q3'], 'scaleType': 'band'}],
    height=350,
)

scaleType: 'band' is required on the category axis. For horizontal bars, put the band axis on yAxis and set layout='horizontal'.

Multi-series vertical

Revenue, expenses, and profit by month.

# File: docs/barchart_basic/multi_example.py

from dash_mui_charts import BarChart

from docs.barchart_basic._data import expenses, months, profit, revenue

component = BarChart(
    id='bar-basic-multi',
    series=[
        {'data': revenue, 'label': 'Revenue ($k)', 'color': '#1976d2'},
        {'data': expenses, 'label': 'Expenses ($k)', 'color': '#f57c00'},
        {'data': profit, 'label': 'Profit ($k)', 'color': '#388e3c'},
    ],
    xAxis=[{'data': months, 'scaleType': 'band', 'label': 'Month'}],
    yAxis=[{'label': 'Amount ($k)'}],
    grid={'horizontal': True},
    height=350,
)

:defaultExpanded: false :withExpandedButton: true

Stacked bar chart

Traffic sources stacked per month via a shared stack id.

# File: docs/barchart_basic/stacked_example.py

from dash_mui_charts import BarChart

from docs.barchart_basic._data import months, organic, paid, referral

component = BarChart(
    id='bar-basic-stacked',
    series=[
        {'data': organic, 'label': 'Organic', 'color': '#66bb6a',
         'stack': 'traffic'},
        {'data': paid, 'label': 'Paid', 'color': '#42a5f5',
         'stack': 'traffic'},
        {'data': referral, 'label': 'Referral', 'color': '#ab47bc',
         'stack': 'traffic'},
    ],
    xAxis=[{'data': months, 'scaleType': 'band'}],
    yAxis=[{'label': 'Visitors (k)'}],
    grid={'horizontal': True},
    height=300,
)

:defaultExpanded: false :withExpandedButton: true

Horizontal bar chart

Revenue displayed horizontally with rounded corners — the band axis moves to yAxis and layout='horizontal'.

# File: docs/barchart_basic/horizontal_example.py

from dash_mui_charts import BarChart

from docs.barchart_basic._data import months, revenue

component = BarChart(
    id='bar-basic-horizontal',
    series=[{'data': revenue, 'label': 'Revenue ($k)', 'color': '#1976d2'}],
    yAxis=[{'data': months, 'scaleType': 'band'}],
    xAxis=[{'label': 'Amount ($k)'}],
    layout='horizontal',
    borderRadius=6,
    grid={'vertical': True},
    height=300,
)

:defaultExpanded: false :withExpandedButton: true

Bar labels

Display values on bars with barLabel='value' and center or outside placement.

# File: docs/barchart_basic/labels_example.py

from dash_mui_charts import BarChart

component = BarChart(
    id='bar-basic-labels',
    series=[
        {'data': [4, 3, 5], 'barLabel': 'value',
         'barLabelPlacement': 'outside', 'label': 'Outside'},
        {'data': [2, 5, 6], 'barLabel': 'value',
         'barLabelPlacement': 'center', 'label': 'Center'},
        {'data': [3, 4, 2], 'label': 'No label'},
    ],
    xAxis=[{'data': ['Group A', 'Group B', 'Group C'], 'scaleType': 'band'}],
    height=300,
    grid={'horizontal': True},
)

:defaultExpanded: false :withExpandedButton: true

Rounded bars with custom colors

borderRadius and a custom colors palette.

# File: docs/barchart_basic/rounded_example.py

from dash_mui_charts import BarChart

component = BarChart(
    id='bar-basic-rounded',
    series=[
        {'data': [25, 50, 35, 70, 45], 'label': 'Sales'},
    ],
    xAxis=[{'data': ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
            'scaleType': 'band'}],
    borderRadius=10,
    colors=['#7c4dff'],
    grid={'horizontal': True},
    height=280,
)

:defaultExpanded: false :withExpandedButton: true

Negative values

Bars with negative values extend below the zero baseline.

# File: docs/barchart_basic/negative_example.py

from dash_mui_charts import BarChart

from docs.barchart_basic._data import months

component = BarChart(
    id='bar-basic-negative',
    series=[
        {'data': [35, -20, 45, -15, 55, -30], 'label': 'Net Change',
         'color': '#00897b'},
    ],
    xAxis=[{'data': months, 'scaleType': 'band'}],
    grid={'horizontal': True},
    height=300,
)

:defaultExpanded: false :withExpandedButton: true

Related pages

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

Source: /barchart-basic