Bar Chart - Dataset

BarChart dataset mode: pass table-format data once and reference columns by dataKey, with stacked series and bar/category gap control.

Overview

Dataset mode passes table-format data ONCE via the dataset prop; each series and the band axis reference columns by dataKey — no data duplication across series.

BarChart(
    dataset=[
        {'month': 'Jan', 'london': 18, 'paris': 15},
        {'month': 'Feb', 'london': 22, 'paris': 18},
    ],
    xAxis=[{'dataKey': 'month', 'scaleType': 'band'}],
    series=[
        {'dataKey': 'london', 'label': 'London'},
        {'dataKey': 'paris', 'label': 'Paris'},
    ],
)

City temperatures (dataset mode)

Data is passed once via dataset; series reference columns by dataKey.

# File: docs/barchart_dataset/temps_example.py

from dash_mui_charts import BarChart

from docs.barchart_dataset._data import temp_dataset

component = BarChart(
    id='bar-ds-temps',
    dataset=temp_dataset,
    xAxis=[{'dataKey': 'month', 'scaleType': 'band'}],
    series=[
        {'dataKey': 'london', 'label': 'London', 'color': '#1976d2'},
        {'dataKey': 'paris', 'label': 'Paris', 'color': '#f57c00'},
        {'dataKey': 'nyc', 'label': 'New York', 'color': '#388e3c'},
        {'dataKey': 'tokyo', 'label': 'Tokyo', 'color': '#d32f2f'},
    ],
    yAxis=[{'label': '°C'}],
    height=380,
    grid={'horizontal': True},
)

:defaultExpanded: false :withExpandedButton: true

Stacked quarterly sales

Stacked bars from a dataset, in horizontal layout.

# File: docs/barchart_dataset/stacked_example.py

from dash_mui_charts import BarChart

from docs.barchart_dataset._data import product_dataset

component = BarChart(
    id='bar-ds-stacked',
    dataset=product_dataset,
    yAxis=[{'dataKey': 'product', 'scaleType': 'band'}],
    series=[
        {'dataKey': 'q1', 'label': 'Q1', 'stack': 'annual',
         'color': '#5c6bc0'},
        {'dataKey': 'q2', 'label': 'Q2', 'stack': 'annual',
         'color': '#42a5f5'},
        {'dataKey': 'q3', 'label': 'Q3', 'stack': 'annual',
         'color': '#26c6da'},
        {'dataKey': 'q4', 'label': 'Q4', 'stack': 'annual',
         'color': '#66bb6a'},
    ],
    layout='horizontal',
    borderRadius=4,
    grid={'vertical': True},
    height=300,
)

:defaultExpanded: false :withExpandedButton: true

Bar gap & category gap

Control spacing with categoryGapRatio and barGapRatio on the band axis.

# File: docs/barchart_dataset/gaps_example.py

from dash_mui_charts import BarChart

from docs.barchart_dataset._data import temp_dataset

component = BarChart(
    id='bar-ds-gaps',
    dataset=temp_dataset,
    xAxis=[{
        'dataKey': 'month',
        'scaleType': 'band',
        'categoryGapRatio': 0.4,
        'barGapRatio': 0.1,
    }],
    series=[
        {'dataKey': 'london', 'label': 'London', 'color': '#1565c0'},
        {'dataKey': 'tokyo', 'label': 'Tokyo', 'color': '#c62828'},
    ],
    yAxis=[{'label': '°C'}],
    height=320,
    grid={'horizontal': True},
)

:defaultExpanded: false :withExpandedButton: true

Related pages

• Basic · Stacking · Interaction · Reference Lines · Pro Features

Source: /barchart-dataset