# Radial Axes > Configure the grid, radius axis, rotation axis, and axis highlight for the radial charts. **Site index:** [https://muischeduler.2plot.dev/llms.txt](https://muischeduler.2plot.dev/llms.txt) — every page on this site, as Markdown. **Network index:** [https://2plot.dev/llms.txt](https://2plot.dev/llms.txt) — The 2plot network; start here to discover sibling sites. **Sibling sites:** 13 more in The 2plot network — listed in the site index above. **Sitemap:** https://muischeduler.2plot.dev/sitemap.xml --- ### 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: ```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"`: ```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*