Radial Bars

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

---

.. llms_copy::Radial Bars

.. toc::

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.

.. admonition::Premium (preview) :color: yellow

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

Basic radial bars

.. exec::docs.radial_bars.basic :code: false

```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:

.. exec::docs.radial_bars.stacked :code: false

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

.. exec::docs.radial_bars.click :code: false

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

.. kwargs::dash_mui_scheduler.RadialBarChart

---

*Source: /radial-bars*