Officina UI
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

PropTypeDefaultDescription
categories*string[]—Axis labels around the radar.
series*{ name: string; data: number[]; color?: string; }[]—Series, each a value per category with an optional colour.
classNamestring—
heightnumber280Chart height in pixels.

On this page