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.

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.

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.

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

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

# 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 · Dataset Mode · Stacking · Interaction · Reference Lines

Source: /barchart-pro