brand-ui — RadarChart

import { RadarChart } from "@elabs-ai/components-charts";

Install

npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-charts

Skipping the @source line is the most common first failure: Tailwind does not scan node_modules, so every component renders unstyled. The one-time wiring

Prompt for your coding agent

Paste it into Claude Code, Cursor, Codex or any other coding agent. Text in [brackets] is yours to fill in.

Add the brand-ui RadarChart chart (from @elabs-ai/components-charts) to this project.

1. Read https://elabs-ai.com/llms.txt first: it maps every package and the rules. If you can use MCP servers, connect https://elabs-ai.com/mcp and use its search, docs and tokens tools. If not, run the same lookups in the terminal: `npx -y @elabs-ai/components-cli search "<what you need>"` and `npx -y @elabs-ai/components-cli docs <Component>`.
2. Look RadarChart up before writing code: `npx -y @elabs-ai/components-cli docs RadarChart` prints its real props, variants, what it pairs with and what to avoid.
3. If @elabs-ai/components-charts is not installed yet: `pnpm add @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-charts` (or `npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-charts`). If this is the first brand-ui package in the project, wire it once: import `@elabs-ai/components-tokens/styles.css` plus the `themes/light.css` and `themes/dark.css` stylesheets in the CSS entry, add one Tailwind `@source` line per installed @elabs-ai package (Tailwind does not scan node_modules, so without it everything renders unstyled), and wrap the app root in `ThemeProvider` from `@elabs-ai/components-tokens`.
4. Use it here: [the screen or file, and what it should show]
5. Rules: use only @elabs-ai/components-* components and the semantic tokens — no raw colours, no raw font sizes, no arbitrary Tailwind values. Look up each component's real props with the docs tool before you use it; never guess a prop.
6. Done means: the typecheck passes, `npx -y @elabs-ai/components-cli audit src --strict` reports nothing, and you have opened the app and looked at every screen you touched in the light and the dark theme.

Use it for

How do these compare? One entity, several dimensions.
several measures per entity, compared as an overall shape rather than value by value

Avoid

more than about 8 spokes, or absolute magnitude matters more than the shape
Plotting metrics with different units on one radar — normalize first or the shape is meaningless.
Overlaying more than ~3 profiles — the filled areas occlude each other; use small multiples.
Relying on the filled area to be readable at low opacity — check the fill against every theme's canvas.

Works with

Contains

RadarAxis
RadarGrid
RadarArea
RadarLabels

Used inside

Examples

4 live examples

Default

Loading

Loading skeleton (RM-183) — shown while `status="loading"`, sized like the real chart.

Multi Series

With Accessible Label

Accessible variant — announces label + description to screen readers on focus.

API

`RadarChart`

Prop	Type	Description
`data`required	`RadarData[]`	Data array - each item represents a data series (polygon)
`metrics`required	`RadarMetric[]`	Metrics to display on the radar
`size`	`number`	Chart size in pixels. If not provided, uses parent container size
`plotHeight`	`Responsive<ChartPlotHeight>`	The plot's own height (ADR 0039): px, or `{ aspect }` (width ÷ height), optionally per breakpoint.
`levels`	`number`	Number of concentric grid circles. Default: 5
`margin`	`number \| Partial<Margin>`	Space around the plot. One number for every side, or a per-side object. Default: 60.
`animate`	`boolean`	Enable animations. Default: true
`animationDuration`	`number`	Enter animation budget in ms. Default: 1100
`enterDurationMs`	`number`	Enter animation budget in ms. @deprecated Since 6.0.0, use `animationDuration`. Removed in 7.0.0.
`enterStaggerScale`	`number`	Scales stagger timing (1 = default).
`staggerScale`	`number`	Scales stagger timing (1 = default). @deprecated Since 6.0.0, use `enterStaggerScale`. Removed in 7.0.0.
`enterTransition`	`Transition`	Motion enter transition (spring or cubic-bezier tween).
`revealSignature`	`string`	Changes when motion settings change — replays enter animations.
`motionReplayKey`	`string`	Changes when motion settings change — replays enter animations. @deprecated Since 6.0.0, use `revealSignature`. Removed in 7.0.0.
`hoveredIndex`	`number \| null`	Controlled hover state - index of hovered area
`onHoverChange`	`(index: number \| null) => void`	Callback when hover state changes
`className`	`string`	Additional class name for the container
`children`required	`ReactNode`	Child components (RadarGrid, RadarAxis, RadarLabels, RadarArea)
`accessibleLabel`	`ChartA11yProps["accessibleLabel"]`	Accessible name for the chart region (announces to AT on focus).
`accessibleDescription`	`ChartA11yProps["accessibleDescription"]`	Supplemental description read by AT (e.g. series names + metric ranges).
`legend`	`ContainerLegendProp`	Container legend (#610, the RM-118 engine): one swatch per polygon (`data[i].label`, in its own colour), mounted outside the plot. Unset renders nothing (today's behaviour). Hover-only: hovering or focusing an item reuses the SAME hover state a pointer over a polygon writes (`hoveredIndex`/`onHoverChange`), so both dim the other polygons alike. `interactive: "toggle"` downgrades to `"hover"` — Radar has no hide-a-polygon wiring. `{ values: true }` prints each polygon's total over `metrics`.
`palette`	`ChartPalette`	Colour ramp for the series (RM-186), through `resolvePalette`; an item's own `color` still wins. Unset: the twelve categorical colours, cycled, as before.
`status`	`ChartStatus`	Show the loading skeleton until the data is ready.
`empty`	`ChartEmptyState`	Title and message shown when there is nothing to plot.
`valueFormat`	`ChartValueFormat`	How values are printed: a preset, or a spec for decimals, sign, prefix and suffix.
`locale`	`string`	BCP 47 locale the numbers are formatted in.
`currency`	`string`	ISO 4217 currency code for currency values.
`maxFractionDigits`	`number`	Most digits printed after the decimal point.

Also accepts: Pick<ChartStateGroupProps, "status" | "empty">, Pick<ValueFormatGroupProps, "valueFormat" | "locale" | "currency" | "maxFractionDigits">

`RadarArea`

Prop	Type	Description
`index`required	`number`	Index of this area in the data array
`color`	`string`	Optional color override
`showPoints`	`boolean`	Show data point circles. Default: true
`showStroke`	`boolean`	Show stroke outline on the polygon. Default: true
`showGlow`	`boolean`	Show glow effect on hover. Default: true
`className`	`string`	Additional class name

`RadarAxis`

Prop	Type	Description
`className`	`string`	Additional class name

`RadarGrid`

Prop	Type	Description
`showLabels`	`boolean`	Show level value labels. Default: true
`className`	`string`	Additional class name

`RadarLabels`

Prop	Type	Description
`offset`	`number`	Distance from the chart edge. Default: 24
`fontSize`	`number`	Font size for labels. Default: 11
`interactive`	`boolean`	Enable interactive hover on labels. Default: false
`className`	`string`	Additional class name