Radial Axes

Configure the grid, radius axis, rotation axis, and axis highlight for the radial charts.

Overview

Both radial charts share the same polar axes, configured through the rotationAxis (angular), radiusAxis (radial), grid, and axisHighlight props. Each is a plain dict (or list of dicts), so you set them straight from Python.

The radial charts are MUI X Premium (preview). Set MUI_X_LICENSE_KEY to remove the watermark.

Grid and axis geometry

The rotation axis spans startAngle → endAngle; the radius axis spans minRadius → maxRadius. grid={"rotation": ..., "radius": ...} toggles the background spokes and rings. Try the controls:

# File: docs/radial_axes/axes.py

import os

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

dataset = [
    {"month": "Jan", "london": 49}, {"month": "Feb", "london": 38},
    {"month": "Mar", "london": 40}, {"month": "Apr", "london": 44},
    {"month": "May", "london": 49}, {"month": "Jun", "london": 45},
    {"month": "Jul", "london": 45}, {"month": "Aug", "london": 50},
    {"month": "Sep", "london": 49}, {"month": "Oct", "london": 69},
    {"month": "Nov", "london": 59}, {"month": "Dec", "london": 56},
]

# The rotation axis spans startAngle -> endAngle; the radius axis spans
# minRadius -> maxRadius. `grid` toggles the background rings/spokes.
component = html.Div(
    [
        dmc.Group(
            [
                dmc.NumberInput(id="ax-start", label="startAngle", value=-90, min=-360, max=360, w=110),
                dmc.NumberInput(id="ax-end", label="endAngle", value=180, min=-360, max=360, w=110),
                dmc.NumberInput(id="ax-minr", label="minRadius", value=30, min=0, max=200, w=110),
                dmc.NumberInput(id="ax-maxr", label="maxRadius", value=130, min=0, max=200, w=110),
                dmc.Switch(id="ax-grot", label="rotation grid", checked=True, mt="lg"),
                dmc.Switch(id="ax-grad", label="radius grid", checked=True, mt="lg"),
            ],
            mb="md",
            align="flex-end",
        ),
        dms.RadialLineChart(
            id="radial-axes-chart",
            height=420,
            licenseKey=os.environ.get("MUI_X_LICENSE_KEY", ""),
            dataset=dataset,
            series=[{"dataKey": "london", "label": "London precipitation (mm)", "curve": "natural", "showMark": True}],
            rotationAxis=[{"scaleType": "point", "dataKey": "month", "startAngle": -90, "endAngle": 180}],
            radiusAxis=[{"minRadius": 30, "maxRadius": 130}],
            grid={"rotation": True, "radius": True},
        ),
    ]
)


@callback(
    Output("radial-axes-chart", "rotationAxis"),
    Output("radial-axes-chart", "radiusAxis"),
    Output("radial-axes-chart", "grid"),
    Input("ax-start", "value"),
    Input("ax-end", "value"),
    Input("ax-minr", "value"),
    Input("ax-maxr", "value"),
    Input("ax-grot", "checked"),
    Input("ax-grad", "checked"),
)
def update_axes(start, end, min_r, max_r, g_rot, g_rad):
    return (
        [{"scaleType": "point", "dataKey": "month", "startAngle": start, "endAngle": end}],
        [{"minRadius": min_r, "maxRadius": max_r}],
        {"rotation": g_rot, "radius": g_rad},
    )

Common axis options include scaleType ("point", "band", "linear"), disableLine, disableTicks, tickNumber, position, and valueFormatter (the last is a function and so is not settable from Python — use the chart's defaults or a dataKey instead).

Axis highlight

axisHighlight highlights data based on the pointer position. Each of rotation and radius can be "none", "line", or "band":

# File: docs/radial_axes/highlight.py

import os

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

_rows = [
    ("Jan", 49, 51, 78), ("Feb", 38, 41, 72), ("Mar", 40, 48, 95),
    ("Apr", 44, 47, 90), ("May", 49, 63, 92), ("Jun", 45, 56, 87),
    ("Jul", 45, 62, 100), ("Aug", 50, 54, 96), ("Sep", 49, 48, 90),
    ("Oct", 69, 60, 90), ("Nov", 59, 53, 85), ("Dec", 56, 56, 90),
]
DATASET_STR = [{"month": m, "london": lo, "paris": pa, "newYork": ny} for (m, lo, pa, ny) in _rows]
# A linear scale needs a numeric axis key, so swap the month label for its index.
DATASET_NUM = [{**d, "month": i + 1} for i, d in enumerate(DATASET_STR)]

SERIES = [
    {"dataKey": "london", "curve": "linear", "label": "London", "showMark": True},
    {"dataKey": "paris", "curve": "linear", "label": "Paris", "showMark": True},
    {"dataKey": "newYork", "curve": "linear", "label": "New York", "showMark": True},
]

# `axisHighlight` highlights data based on the pointer: each of `rotation` and
# `radius` can be "none", "line", or "band".
component = html.Div(
    [
        dmc.Group(
            [
                dmc.Stack([dmc.Text("scale type", size="sm", fw=600),
                           dmc.SegmentedControl(id="rax-scale", value="point",
                                                data=["band", "point", "linear"])], gap=2),
                dmc.Stack([dmc.Text("rotation highlight", size="sm", fw=600),
                           dmc.SegmentedControl(id="rax-rot", value="band",
                                                data=["none", "line", "band"])], gap=2),
                dmc.Stack([dmc.Text("radius highlight", size="sm", fw=600),
                           dmc.SegmentedControl(id="rax-rad", value="none",
                                                data=["none", "line"])], gap=2),
            ],
            mb="md",
        ),
        dms.RadialLineChart(
            id="radial-axes-highlight",
            height=400,
            licenseKey=os.environ.get("MUI_X_LICENSE_KEY", ""),
            dataset=DATASET_STR,
            series=SERIES,
            rotationAxis=[{"dataKey": "month", "scaleType": "point"}],
            radiusAxis=[{"minRadius": 10, "min": 0}],
            grid={"rotation": True, "radius": True},
            axisHighlight={"rotation": "band", "radius": "none"},
        ),
    ]
)


@callback(
    Output("radial-axes-highlight", "dataset"),
    Output("radial-axes-highlight", "rotationAxis"),
    Output("radial-axes-highlight", "axisHighlight"),
    Input("rax-scale", "value"),
    Input("rax-rot", "value"),
    Input("rax-rad", "value"),
)
def update_highlight(scale, rotation, radius):
    dataset = DATASET_NUM if scale == "linear" else DATASET_STR
    return dataset, [{"dataKey": "month", "scaleType": scale}], {"rotation": rotation, "radius": radius}

Source: /radial-axes