Radial Lines

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

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.

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.

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

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

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

# 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

RadialLineChart props

Source: /radial-lines