Radial Bars

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

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

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

# 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

# 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

Source: /radial-bars