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