Skip to main content
RadarChart plots data across multiple axes radiating from a center point, forming a spider-web shape. Each ChartSeries becomes a filled polygon, making it easy to compare profiles across categories. See Charts for the shared data, series, and formatting model.

​
Basic Usage

​
Minimal

Set show_grid=False to hide the polar grid. The filled shape then stands on its own — useful when you want readers to compare overall silhouettes rather than read values off each spoke.

​
Lines Only

Set filled=False to render outlines without filled polygons, which can be easier to read when comparing multiple series.

​
API Reference

RadarChart Parameters

​
list[dict] | str
required
Data as a list of dicts, or a {{ field }} interpolation reference.
​
list[ChartSeries]
required
Series definitions — each becomes a filled polygon on the chart.
​
str | None
default:"None"
Data key for angular axis labels.
​
int
default:"300"
Chart height in pixels.
​
bool
default:"True"
Fill the area inside each series polygon.
​
bool
default:"False"
Show a dot at each data point.
​
bool
default:"False"
Show a legend below the chart.
​
bool
default:"True"
Show tooltips on hover.
​
bool
default:"True"
Show polar grid lines.
​
str | None
default:"None"
Additional Tailwind CSS classes.

ChartSeries Parameters

​
str
required
Data field to plot — must match a key in the data dicts.
​
str | None
default:"None"
Display label for legends and tooltips. Defaults to the data_key value.
​
str | None
default:"None"
CSS color override. By default, colors cycle through the theme’s chart palette (--chart-1 through --chart-5).

​
Protocol Reference

RadarChart
ChartSeries
For the complete protocol schema, see RadarChart, ChartSeries.