Radial Axes

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

---

.. llms_copy::Radial Axes

.. toc::

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.

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

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:

.. exec::docs.radial_axes.axes :code: false

```python

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

.. exec::docs.radial_axes.highlight :code: false

```python

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*