# Bar Chart - Pro

> BarChart Pro features with a MUI X license key: zoom with slider, zoom plus toolbar, and stacked bars with zoom on 52 weeks of data.

**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

Pro features — zoom, the range slider and the toolbar — flip the component
onto `BarChartPro` from `@mui/x-charts-pro` automatically when used.


    These demos require a **MUI X Pro license key**, read from the
    `MUI_PRO_API_KEY` environment variable and passed as `licenseKey`.
    Without it the charts render with the unlicensed watermark.

```python
BarChart(
    licenseKey=MUI_KEY,
    series=[{'data': weekly_sales, 'label': 'Sales'}],
    xAxis=[{'data': categories, 'scaleType': 'band',
            'zoom': {'minSpan': 8}}],
    showSlider=True,
    initialZoom=[{'axisId': 'auto-generated-id-0', 'start': 0, 'end': 40}],
)
```

---

### Zoom with slider

52 weeks of data with a zoom slider — drag the slider or use the mouse
wheel to zoom.



```python
# File: docs/barchart_pro/slider_example.py

import os

from dash import html

from dash_mui_charts import BarChart
from docs.barchart_pro._data import categories, weekly_sales

MUI_KEY = os.getenv('MUI_PRO_API_KEY', '')

component = html.Div(
    [
        # License posture, stated in-page either way: the keyless banner is
        # what tests/test_pages_smoke.py BANNER_ROUTES asserts.
        html.P(
            "⚠️ Set MUI_PRO_API_KEY environment variable to enable Pro "
            "features." if not MUI_KEY else "✓ Pro license key detected.",
            style={'color': 'var(--mantine-color-orange-6)' if not MUI_KEY
                   else 'var(--mantine-color-green-7)',
                   'fontWeight': 600},
        ),
        BarChart(
            id='bar-pro-slider',
            licenseKey=MUI_KEY,
            series=[
                {'data': weekly_sales, 'label': 'Sales', 'color': '#1976d2'},
            ],
            xAxis=[{
                'data': categories,
                'scaleType': 'band',
                'zoom': {'minSpan': 8},
                'label': 'Week',
            }],
            yAxis=[{'label': 'Units'}],
            showSlider=True,
            initialZoom=[{'axisId': 'auto-generated-id-0',
                          'start': 0, 'end': 40}],
            grid={'horizontal': True},
            height=400,
        ),
    ]
)
```

    :defaultExpanded: false
    :withExpandedButton: true

---

### Zoom + toolbar

Toolbar with zoom in/out buttons and export options.



```python
# File: docs/barchart_pro/toolbar_example.py

import os

from dash_mui_charts import BarChart
from docs.barchart_pro._data import categories, weekly_returns, weekly_sales

MUI_KEY = os.getenv('MUI_PRO_API_KEY', '')

component = BarChart(
    id='bar-pro-toolbar',
    licenseKey=MUI_KEY,
    series=[
        {'data': weekly_sales, 'label': 'Sales', 'color': '#1565c0'},
        {'data': weekly_returns, 'label': 'Returns', 'color': '#c62828'},
    ],
    xAxis=[{
        'data': categories,
        'scaleType': 'band',
        'zoom': {'minSpan': 5},
    }],
    showSlider=True,
    showToolbar=True,
    grid={'horizontal': True},
    height=420,
)
```

    :defaultExpanded: false
    :withExpandedButton: true

---

### Stacked with zoom

Stacked bars with zoom and slider.



```python
# File: docs/barchart_pro/stacked_zoom_example.py

import os

from dash_mui_charts import BarChart
from docs.barchart_pro._data import categories, online, retail, wholesale

MUI_KEY = os.getenv('MUI_PRO_API_KEY', '')

component = BarChart(
    id='bar-pro-stacked-zoom',
    licenseKey=MUI_KEY,
    series=[
        {'data': online, 'label': 'Online', 'stack': 'channel',
         'color': '#1976d2'},
        {'data': retail, 'label': 'Retail', 'stack': 'channel',
         'color': '#42a5f5'},
        {'data': wholesale, 'label': 'Wholesale', 'stack': 'channel',
         'color': '#90caf9'},
    ],
    xAxis=[{
        'data': categories,
        'scaleType': 'band',
        'zoom': {'minSpan': 6},
    }],
    showSlider=True,
    grid={'horizontal': True},
    height=380,
)
```

    :defaultExpanded: false
    :withExpandedButton: true

---

### Related pages

- [Basic](/barchart-basic) · [Dataset Mode](/barchart-dataset) · [Stacking](/barchart-stacking) · [Interaction](/barchart-interaction) · [Reference Lines](/barchart-reference)


---

*Source: /barchart-pro*