Radar Chart

A radar chart for comparing a few series across the same axes.

When to use

Use when: Comparing a few series across five to eight shared axes.
Avoid when: Fewer than five axes, or axes that are not comparable; use a Bar Chart.

Installation

bunx shelf add chart-radar

The source lands in src/components/ui/chart-radar.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import * as Chart from "@/components/ui/chart-radar";

<RadarChart aria-label="Skills" data={data}>
  <AngleGrid />
  <AngleAxis dataKey="skill" />
  <Chart.Tooltip />
  <Radar dataKey="score" />
</RadarChart>

Built on

Packages: @stylexjs/stylex, recharts
Shelf items: Chart, foundations
Figma: In progress. See Designers and Figma.