Components
RadarChart
Radar chart comparing several entities across shared metric axes radiating from a centre.
RadarChart plots each entity as a polygon over shared axes that radiate from a
centre, making it easy to compare multi-metric profiles at a glance — like
scoring channels across reach, activation, and retention. Pass the axis names in
categories and one entry per polygon in series, where each data array
lines up positionally with categories. It renders client-side via ECharts, so
give it a height (defaults to 280).
Example
Preview
import { RadarChart } from '@officina/ui';
<RadarChart
categories={['Reach', 'Activation', 'Revenue', 'Retention']}
series={[
{ name: 'Organic', data: [90, 78, 62, 84] },
{ name: 'Paid', data: [74, 65, 80, 58] },
]}
height={280}
/>;API
| Prop | Type | Default | Description |
|---|---|---|---|
| categories* | string[] | — | Axis labels around the radar. |
| series* | { name: string; data: number[]; color?: string; }[] | — | Series, each a value per category with an optional colour. |
| className | string | — | |
| height | number | 280 | Chart height in pixels. |