Radial Lines

Polar line and area charts for showing trends along periodic values, wrapping MUI X RadialLineChart (Premium, preview).

---

.. llms_copy::Radial Lines

.. toc::

Overview

RadialLineChart plots line (and area) series in polar coordinates — a preview component from @mui/x-charts-premium, bundled here alongside the scheduler. The cartesian x-axis is replaced by a rotationAxis (angular) and the y-axis by a radiusAxis (radial). Data crosses the Dash boundary as plain dicts and lists, so series, dataset, and axes are just Python objects.

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

RadialLineChart and RadialBarChart come from MUI X Premium and are preview (Unstable_) — production-ready, but the API may shift in minor releases. Without a licenseKey they render a watermark; set MUI_X_LICENSE_KEY in your environment to remove it.

Basic radial line

Pass series plus a rotationAxis / radiusAxis. Here a point rotation axis maps each month around the circle, and grid draws the background rings/spokes.

.. exec::docs.radial_lines.basic :code: false

```python

File: docs/radial_lines/basic.py

import os

from dash import html import dash_mui_scheduler as dms

Row-oriented data; each series references a column via dataKey.

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}, ]

rotationAxis is the angular (x-like) axis; radiusAxis is the radial (y-like) one.

component = html.Div( dms.RadialLineChart( id="radial-lines-basic", height=400, 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", "disableLine": True}], radiusAxis=[{"disableLine": True}], grid={"rotation": True, "radius": True}, ) ) ```

Marks

Set showMark: True on a series to draw marks, and shape to pick one of seven shapes: circle, square, diamond, cross, star, triangle, wye.

.. exec::docs.radial_lines.marks :code: false

```python

File: docs/radial_lines/marks.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}, ] SHAPES = ["circle", "square", "diamond", "cross", "star", "triangle", "wye"]

def _series(shape): return [{"dataKey": "london", "label": "London precipitation (mm)", "curve": "natural", "showMark": True, "shape": shape}]

showMark: True draws marks; shape picks one of 7 mark shapes.

component = html.Div( [ dmc.Select(id="radial-lines-shape", label="Mark shape", value="circle", data=SHAPES, maw=200, mb="md"), dms.RadialLineChart( id="radial-lines-marks", height=400, licenseKey=os.environ.get("MUI_X_LICENSE_KEY", ""), dataset=dataset, series=_series("circle"), rotationAxis=[{"scaleType": "point", "dataKey": "month", "disableLine": True}], radiusAxis=[{"disableLine": True}], grid={"rotation": True, "radius": True}, ), ] )

@callback( Output("radial-lines-marks", "series"), Input("radial-lines-shape", "value"), prevent_initial_call=True, ) def set_shape(shape): return _series(shape) ```

Continuous rotation axis

The rotation axis can use any scale type. Here a numeric axis spans a full turn (0 → 2π) and cos(3θ) traces a three-petal rose:

.. exec::docs.radial_lines.continuous :code: false

```python

File: docs/radial_lines/continuous.py

import math import os

from dash import html import dash_mui_scheduler as dms

A continuous (numeric) rotation axis. cos(3θ) traces a three-petal rose.

SAMPLES = 200 angles = [i * 2 * math.pi / SAMPLES for i in range(SAMPLES + 1)] cardioid = [100 * (1 + math.cos(a * 3)) for a in angles]

tickInterval places ticks at the quarter angles; min/max bound the axis

to a full turn. (The React demo's valueFormatter/domainLimit are JS

functions, which cannot cross the Dash boundary — so ticks show radians and we

bound the axis with min/max instead.)

component = html.Div( dms.RadialLineChart( id="radial-lines-continuous", height=400, licenseKey=os.environ.get("MUI_X_LICENSE_KEY", ""), series=[{"data": cardioid, "label": "Cardioid", "curve": "linear"}], rotationAxis=[{ "data": angles, "min": 0, "max": 2 * math.pi, "tickInterval": [0, math.pi / 2, math.pi, 3 * math.pi / 2, 2 * math.pi], }], radiusAxis=[{"position": "none"}], grid={"rotation": True, "radius": True}, ) ) ```

Reading clicks

onAxisClick is surfaced as the clickData output — it reports the clicked rotation-axis item and the series values at that index. Wire it to a callback:

.. exec::docs.radial_lines.axis_click :code: false

```python

File: docs/radial_lines/axis_click.py

import json import os

from dash import html, dcc, Input, Output, callback import dash_mui_scheduler as dms

onAxisClick surfaces as the clickData output — the clicked rotation-axis

item and the series values at that index.

component = html.Div( [ dms.RadialLineChart( id="radial-lines-click", height=380, licenseKey=os.environ.get("MUI_X_LICENSE_KEY", ""), series=[ {"id": "a", "data": [3, 4, 1, 6, 5], "label": "A", "stack": "total", "highlightScope": {"highlight": "item"}}, {"id": "b", "data": [4, 3, 1, 5, 8], "label": "B", "stack": "total", "highlightScope": {"highlight": "item"}}, {"id": "c", "data": [4, 2, 5, 4, 1], "label": "C", "highlightScope": {"highlight": "item"}}, ], rotationAxis=[{"data": [0, 3, 6, 9, 12], "disableLine": True, "disableTicks": True}], radiusAxis=[{"position": "none"}], grid={"rotation": True, "radius": True}, ), dcc.Markdown(id="radial-lines-click-out"), ] )

@callback( Output("radial-lines-click-out", "children"), Input("radial-lines-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

.. kwargs::dash_mui_scheduler.RadialLineChart

---

*Source: /radial-lines*