# Bar Chart - Basic

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

**Site index:** [https://muicharts.2plot.dev/llms.txt](https://muicharts.2plot.dev/llms.txt) — every page on this site, as Markdown.  
**Network index:** [https://2plot.dev/llms.txt](https://2plot.dev/llms.txt) — The 2plot network; start here to discover sibling sites.  
**Sibling sites:** 13 more in The 2plot network — listed in the site index above.  
**Sitemap:** https://muicharts.2plot.dev/sitemap.xml  


---



### 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.

```python
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.



```python
# 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.



```python
# 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'`.



```python
# 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.



```python
# 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.



```python
# 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.



```python
# 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](/barchart-dataset) · [Stacking](/barchart-stacking) · [Interaction](/barchart-interaction) · [Reference Lines](/barchart-reference) · [Pro Features](/barchart-pro)


---

*Source: /barchart-basic*