# Radial Bars

> Polar bar charts for comparing values along periodic categories, wrapping MUI X RadialBarChart (Premium, preview).

**Site index:** [https://muischeduler.2plot.dev/llms.txt](https://muischeduler.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://muischeduler.2plot.dev/sitemap.xml  


---



### Overview

`RadialBarChart` is the polar counterpart of the bar chart: the x/y axes become
**`rotationAxis`** (a `band` axis of categories around the circle) and
**`radiusAxis`** (the radial value scale). It accepts the same display options
as a cartesian bar chart — `stack` and `layout` on each series, and
`categoryGapRatio` / `barGapRatio` on the band axis.


    Premium, preview (`Unstable_`) — set `MUI_X_LICENSE_KEY` to remove the
    watermark.

### Basic radial bars



```python
# File: docs/radial_bars/basic.py

import os

from dash import html
import dash_mui_scheduler as dms

# Polar bars: a `band` rotation axis defines the categories around the circle,
# and the radius encodes each value.
component = html.Div(
    dms.RadialBarChart(
        id="radial-bars-basic",
        height=400,
        licenseKey=os.environ.get("MUI_X_LICENSE_KEY", ""),
        series=[{"data": [12, 19, 8, 15], "label": "Revenue ($M)"}],
        rotationAxis=[{"scaleType": "band", "data": ["Q1", "Q2", "Q3", "Q4"]}],
        grid={"rotation": True, "radius": True},
    )
)
```


### Stacking and layout

Series with the same `stack` value are stacked together. `layout` swaps which
axis encodes the value: `"vertical"` (default) uses the radius, `"horizontal"`
uses the rotation. Toggle the controls below:



```python
# File: docs/radial_bars/stacked.py

import os

from dash import html, Input, Output, callback
import dash_mantine_components as dmc
import dash_mui_scheduler as dms

# Netflix balance sheet ($B). Series reference columns by dataKey.
dataset = [
    {"year": "2020", "totAss": 39.3, "totLia": 28.2, "totEq": 11.1},
    {"year": "2021", "totAss": 44.6, "totLia": 28.7, "totEq": 15.8},
    {"year": "2022", "totAss": 48.6, "totLia": 27.8, "totEq": 20.8},
    {"year": "2023", "totAss": 48.7, "totLia": 28.0, "totEq": 20.6},
]


def _series(layout, stack):
    # Total Assets stands alone; Liabilities + Equity stack into "passive".
    stk = "passive" if stack else None
    out = [{"dataKey": "totAss", "label": "Total Assets", "layout": layout}]
    for key, label in [("totLia", "Total Liabilities"), ("totEq", "Total Equity")]:
        s = {"dataKey": key, "label": label, "layout": layout}
        if stk:
            s["stack"] = stk
        out.append(s)
    return out


def _rotation(gap_cat, gap_bar):
    return [{
        "scaleType": "band",
        "dataKey": "year",
        "categoryGapRatio": gap_cat,
        "barGapRatio": gap_bar,
    }]


component = html.Div(
    [
        dmc.Group(
            [
                dmc.SegmentedControl(
                    id="radial-bars-layout",
                    value="vertical",
                    data=[{"label": "vertical", "value": "vertical"}, {"label": "horizontal", "value": "horizontal"}],
                ),
                dmc.Switch(id="radial-bars-stack", label="stack liabilities + equity", checked=True),
            ],
            mb="md",
        ),
        dms.RadialBarChart(
            id="radial-bars-stacked",
            height=400,
            licenseKey=os.environ.get("MUI_X_LICENSE_KEY", ""),
            dataset=dataset,
            series=_series("vertical", True),
            rotationAxis=_rotation(0.3, 0.1),
            grid={"radius": True},
        ),
    ]
)


@callback(
    Output("radial-bars-stacked", "series"),
    Input("radial-bars-layout", "value"),
    Input("radial-bars-stack", "checked"),
)
def update(layout, stack):
    return _series(layout, stack)
```


### Reading clicks



```python
# File: docs/radial_bars/click.py

import json
import os

from dash import html, dcc, Input, Output, callback
import dash_mui_scheduler as dms

# Like the line chart, `onAxisClick` surfaces as the `clickData` output.
component = html.Div(
    [
        dms.RadialBarChart(
            id="radial-bars-click",
            height=380,
            licenseKey=os.environ.get("MUI_X_LICENSE_KEY", ""),
            series=[
                {"data": [3, 4, 1, 6, 5], "label": "A", "stack": "total"},
                {"data": [4, 3, 1, 5, 8], "label": "B", "stack": "total"},
                {"data": [4, 2, 5, 4, 1], "label": "C", "stack": "total"},
            ],
            rotationAxis=[{"scaleType": "band", "data": ["Mon", "Tue", "Wed", "Thu", "Fri"]}],
            grid={"radius": True},
        ),
        dcc.Markdown(id="radial-bars-click-out"),
    ]
)


@callback(
    Output("radial-bars-click-out", "children"),
    Input("radial-bars-click", "clickData"),
)
def show_click(data):
    if not data:
        return "_Click anywhere on the chart to see the clicked axis data._"
    return f"```json\n{json.dumps(data, indent=2)}\n```"
```


### Props


#### `RadialBarChart` props

| prop | type | description |
|---|---|---|
| `id` | string; optional | The id used to identify this component in Dash callbacks. |
| `axisHighlight` | dict; optional | Axis highlight behavior: {rotation, radius} where each is one of "none" \| "line" \| "band". Default depends on the layout. `axisHighlight` is a dict with keys: - rotation (a value equal to: 'none', 'line', 'band'; optional) - radius (a value equal to: 'none', 'line', 'band'; optional) |
| `className` | string; optional | CSS class applied to the wrapping div. |
| `clickData` | dict; optional | OUTPUT — set when the user clicks the chart. The clicked axis item and its series values, e.g. {dataIndex, axisValue, seriesValues, event_timestamp}. |
| `colors` | list of strings; optional | Color palette (list of CSS colors) used for the series. |
| `dataset` | list of dicts; optional | Row-oriented data; series reference columns via `dataKey`. |
| `grid` | dict; optional | Show background grid lines: {rotation: bool, radius: bool}. `grid` is a dict with keys: - rotation (boolean; optional) - radius (boolean; optional) |
| `height` | number \| string; default 400 | Chart height in px. Default 400. |
| `hideLegend` | boolean; optional | Hide the legend. |
| `licenseKey` | string; optional | MUI X Premium license key (removes the watermark). |
| `margin` | number \| dict; optional | Margin around the plot — a number or {top,right,bottom,left}. |
| `radiusAxis` | list of dicts; optional | Radius axis config — replaces the cartesian y-axis. A list of axis dicts. |
| `rotationAxis` | list of dicts; optional | Rotation (angular) axis config — replaces the cartesian x-axis. A list of axis dicts. A band axis accepts `categoryGapRatio` / `barGapRatio`, e.g. [{scaleType:"band", data:["2020","2021"], categoryGapRatio:0.3, barGapRatio:0.1}]. |
| `series` | list of dicts; optional | The bar series to plot. Each item is a dict, e.g. {dataKey, label, stack, layout:"vertical"\|"horizontal", color} or {data: [...], label, ...}. |
| `showToolbar` | boolean; optional | Show the default chart toolbar. |
| `skipAnimation` | boolean; optional | Skip the entrance animation. |
| `slotProps` | dict; optional | MUI X charts `slotProps` (plain-object form only), e.g. {"tooltip": {"trigger": "item"}}. |
| `sx` | dict; optional | MUI `sx` styling object (object form only). |
| `width` | number \| string; optional | Chart width in px (defaults to filling the container). |


---

*Source: /radial-bars*