> ## Documentation Index
> Fetch the complete documentation index at: https://prefab.prefect.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# RadarChart
> Compare multivariate data on radial axes.
export const ComponentPreview = ({json, height, resizable, bare, hideJson, playground, children}) => {
const hostRef = React.useRef(null);
const handleRef = React.useRef(null);
const cardRef = React.useRef(null);
const containerRef = React.useRef(null);
const [previewWidth, setPreviewWidth] = React.useState(null);
const [isDragging, setIsDragging] = React.useState(false);
const [playgroundHref, setPlaygroundHref] = React.useState(null);
React.useEffect(function () {
if (!playground) return;
var isLocal = location.hostname === "localhost" || location.hostname === "127.0.0.1";
var path = isLocal ? "/playground" : "/docs/playground";
var url = new URL(path, window.location.href);
url.hash = "code=" + playground;
setPlaygroundHref(url.href);
}, [playground]);
var jsonStr = typeof json === "string" ? json : JSON.stringify(json, null, 2);
React.useEffect(function () {
if (cardRef.current) {
var card = cardRef.current.closest(".group");
if (card) card.classList.remove("group");
}
var host = hostRef.current;
if (!host || !json) return;
function mount() {
if (!window.__prefab || !host) return;
var dark = document.documentElement.classList.contains("dark");
handleRef.current = window.__prefab.mountPreview(host, jsonStr, {
dark: dark
});
if (bare && host.shadowRoot) {
var m = host.shadowRoot.querySelector("[data-prefab-mount]");
if (m) m.style.background = "transparent";
}
}
if (window.__prefab) {
mount();
} else {
if (!window.__prefabLoading) {
if (!window.__prefabReady) {
var s = document.createElement("script");
s.src = "/renderer.js";
document.head.appendChild(s);
}
window.__prefabLoading = new Promise(function (resolve) {
function check() {
if (window.__prefabReady) {
window.__prefabReady.then(resolve);
} else {
setTimeout(check, 10);
}
}
check();
});
}
window.__prefabLoading.then(mount);
}
var observer = new MutationObserver(function () {
var dark = document.documentElement.classList.contains("dark");
if (handleRef.current) handleRef.current.setDark(dark);
});
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ["class"]
});
return function () {
observer.disconnect();
if (handleRef.current) {
handleRef.current.unmount();
handleRef.current = null;
}
};
}, [json]);
function startResize(e) {
e.preventDefault();
var startX = e.clientX;
var startW = hostRef.current ? hostRef.current.offsetWidth : 0;
var maxW = containerRef.current ? containerRef.current.offsetWidth - 10 : startW;
setIsDragging(true);
function onMove(ev) {
var w = Math.max(260, Math.min(startW + (ev.clientX - startX), maxW));
setPreviewWidth(w);
}
function onUp() {
document.removeEventListener("mousemove", onMove);
document.removeEventListener("mouseup", onUp);
setIsDragging(false);
}
document.addEventListener("mousemove", onMove);
document.addEventListener("mouseup", onUp);
}
if (bare) {
return ;
}
if (resizable) {
return
{previewWidth &&
{previewWidth}px
}
{playgroundHref && }
{children}
;
}
return
{playgroundHref && }
{children}
;
};
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](/components/charts) for the shared data, series, and formatting model.
## Basic Usage
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components.charts import RadarChart, ChartSeries
data = [
{"subject": "Math", "alice": 120, "bob": 98},
{"subject": "English", "alice": 98, "bob": 130},
{"subject": "Science", "alice": 86, "bob": 110},
{"subject": "History", "alice": 99, "bob": 95},
{"subject": "Art", "alice": 85, "bob": 90},
]
RadarChart(
data=data,
series=[
ChartSeries(data_key="alice", label="Alice"),
ChartSeries(data_key="bob", label="Bob"),
],
axis_key="subject",
show_legend=True,
)
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"type": "RadarChart",
"data": [
{"subject": "Math", "alice": 120, "bob": 98},
{"subject": "English", "alice": 98, "bob": 130},
{"subject": "Science", "alice": 86, "bob": 110},
{"subject": "History", "alice": 99, "bob": 95},
{"subject": "Art", "alice": 85, "bob": 90}
],
"series": [{"dataKey": "alice", "label": "Alice"}, {"dataKey": "bob", "label": "Bob"}],
"axisKey": "subject",
"height": 300,
"filled": true,
"showDots": false,
"showLegend": true,
"showTooltip": true,
"animate": true,
"showGrid": true
}
}
```
## 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.
```python Python {5} icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
RadarChart(
data=data,
series=[ChartSeries(data_key="alice", label="Alice")],
axis_key="subject",
show_grid=False,
)
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"type": "RadarChart",
"data": [
{"subject": "Math", "alice": 120, "bob": 98},
{"subject": "English", "alice": 98, "bob": 130},
{"subject": "Science", "alice": 86, "bob": 110},
{"subject": "History", "alice": 99, "bob": 95},
{"subject": "Art", "alice": 85, "bob": 90}
],
"series": [{"dataKey": "alice", "label": "Alice"}],
"axisKey": "subject",
"height": 300,
"filled": true,
"showDots": false,
"showLegend": true,
"showTooltip": true,
"animate": true,
"showGrid": false
}
}
```
## Lines Only
Set `filled=False` to render outlines without filled polygons, which can be easier to read when comparing multiple series.
```python Python {8} icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
RadarChart(
data=data,
series=[
ChartSeries(data_key="alice", label="Alice"),
ChartSeries(data_key="bob", label="Bob"),
],
axis_key="subject",
filled=False,
show_legend=True,
)
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"type": "RadarChart",
"data": [
{"subject": "Math", "alice": 120, "bob": 98},
{"subject": "English", "alice": 98, "bob": 130},
{"subject": "Science", "alice": 86, "bob": 110},
{"subject": "History", "alice": 99, "bob": 95},
{"subject": "Art", "alice": 85, "bob": 90}
],
"series": [{"dataKey": "alice", "label": "Alice"}, {"dataKey": "bob", "label": "Bob"}],
"axisKey": "subject",
"height": 300,
"filled": false,
"showDots": false,
"showLegend": true,
"showTooltip": true,
"animate": true,
"showGrid": true
}
}
```
## API Reference
Data as a list of dicts, or a `{{ field }}` interpolation reference.
Series definitions — each becomes a filled polygon on the chart.
Data key for angular axis labels.
Chart height in pixels.
Fill the area inside each series polygon.
Show a dot at each data point.
Show a legend below the chart.
Show tooltips on hover.
Show polar grid lines.
Additional Tailwind CSS classes.
Data field to plot — must match a key in the data dicts.
Display label for legends and tooltips. Defaults to the `data_key` value.
CSS color override. By default, colors cycle through the theme's chart palette (`--chart-1` through `--chart-5`).
## Protocol Reference
```json RadarChart theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"type": "RadarChart",
"id?": "string",
"onMount?": "any",
"data": "object[] | string (required)",
"series": "[ChartSeries] (required)",
"axisKey?": "string",
"height?": "300",
"filled?": true,
"showDots?": false,
"showLegend?": true,
"showTooltip?": true,
"animate?": true,
"showGrid?": true,
"cssClass?": "string"
}
```
```json ChartSeries theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"dataKey": "string (required)",
"label?": "string",
"color?": "string"
}
```
For the complete protocol schema, see [RadarChart](/protocol/radar-chart), [ChartSeries](/protocol/chart-series).