Skip to main content
RadialChart renders each data item as a concentric ring, with length proportional to its value. Like PieChart, it uses data_key for numeric values and name_key for labels. Adjust inner_radius to control how tight the rings are.

​
Basic Usage

​
Tight Rings

Increase inner_radius to push rings outward, creating a tighter radial layout.

​
Semicircle

Adjust start_angle and end_angle to render rings as a partial arc instead of a full circle. For example, start_angle=90 and end_angle=-270 produces a semicircle opening to the right.

​
Tooltip Formatting

Use value_format to format tooltip values with the same pipe strings as Prefab expressions and data table columns. Compact formatting keeps large radial values readable when users hover each ring.

​
API Reference

RadialChart Parameters

​
data
list[dict] | str
required
Data as a list of dicts, or a {{ field }} interpolation reference.
​
data_key
str
required
The data field containing numeric values to plot as ring lengths.
​
name_key
str
required
The data field containing labels for each ring.
​
height
int
default:"300"
Chart height in pixels.
​
inner_radius
int
default:"30"
Inner radius in pixels. Increase to push rings outward.
​
start_angle
int
default:"180"
Starting angle in degrees for the radial layout.
​
end_angle
int
default:"0"
Ending angle in degrees for the radial layout.
​
show_legend
bool
default:"False"
Show a legend below the chart.
​
show_tooltip
bool
default:"True"
Show tooltips on hover.
​
value_format
str
default:"\"auto\""
Format tooltip values with an expression pipe such as currency, currency:EUR, percent:1, or compact:0.
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes.

​
Protocol Reference

RadialChart
{
  "type": "RadialChart",
  "id?": "string",
  "onMount?": "any",
  "data": "object[] | string (required)",
  "dataKey": "string (required)",
  "nameKey": "string (required)",
  "height?": "300",
  "innerRadius?": 30,
  "startAngle?": "180",
  "endAngle?": 0,
  "showLegend?": true,
  "showTooltip?": true,
  "animate?": true,
  "valueFormat?": "string",
  "cssClass?": "string"
}
For the complete protocol schema, see RadialChart.