# Radial Lines

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

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

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



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



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



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



```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


#### `RadialLineChart` props

| prop | type | description |
|---|---|---|
| `id` | string; optional | The id used to identify this component in Dash callbacks. |
| `axisHighlight` | dict; optional | Axis highlight behavior: {rotation, radius} where each is one of "none" \| "line" \| "band". Default {rotation: "line"}. `axisHighlight` is a dict with keys: - rotation (a value equal to: 'none', 'line', 'band'; optional) - radius (a value equal to: 'none', 'line', 'band'; optional) |
| `className` | string; optional | CSS class applied to the wrapping div. |
| `clickData` | dict; optional | OUTPUT — set when the user clicks the chart. The clicked rotation-axis item and its series values, e.g. {dataIndex, axisValue, seriesValues, event_timestamp}. |
| `colors` | list of strings; optional | Color palette (list of CSS colors) used for the series. |
| `dataset` | list of dicts; optional | Row-oriented data; series reference columns via `dataKey`. |
| `disableLineItemHighlight` | boolean; optional | Disable the per-item line highlight indicator. |
| `grid` | dict; optional | Show background grid lines: {rotation: bool, radius: bool}. `grid` is a dict with keys: - rotation (boolean; optional) - radius (boolean; optional) |
| `height` | number \| string; default 400 | Chart height in px. Default 400. |
| `hideLegend` | boolean; optional | Hide the legend. |
| `licenseKey` | string; optional | MUI X Premium license key (removes the watermark). |
| `margin` | number \| dict; optional | Margin around the plot — a number or {top,right,bottom,left}. |
| `radiusAxis` | list of dicts; optional | Radius axis config — replaces the cartesian y-axis. A list of axis dicts, e.g. [{disableLine:True, minRadius:10, min:0, position:"none"}]. |
| `rotationAxis` | list of dicts; optional | Rotation (angular) axis config — replaces the cartesian x-axis. A list of axis dicts, e.g. [{scaleType:"point", dataKey:"month", disableLine:True}]. |
| `series` | list of dicts; optional | The line/area series to plot. Each item is a dict, e.g. {dataKey, label, curve, showMark, shape, area, closePath, stack, highlightScope, color} or {data: [...], label, ...}. |
| `showToolbar` | boolean; optional | Show the default chart toolbar. |
| `skipAnimation` | boolean; optional | Skip the entrance animation. |
| `slotProps` | dict; optional | MUI X charts `slotProps` (plain-object form only). For example {"tooltip": {"trigger": "item"}} makes the tooltip follow the hovered mark/line instead of the whole rotation axis. |
| `sx` | dict; optional | MUI `sx` styling object (object form only). |
| `width` | number \| string; optional | Chart width in px (defaults to filling the container). |


---

*Source: /radial-lines*