Radar Chart
Compare two profiles on a radar: switch which one leads, hover an axis for both values, and see where each one wins.
radar-chart.tsxradar-chart.css
Checking access…
Overview
Axes radiate from the centre with concentric rings at quarter steps. One series is a filled shape, the other a dashed outline, so they read apart without colour.
Hovering or focusing an axis label shows both values; the legend lists how many axes each side wins.
When to use
- Product comparisons, skill or attribute profiles.
When not to use
- More than two series or precise reading: use grouped bars.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/radar-chart.json$
npx shadcn@latest add https://sundaeui.dev/r/radar-chart.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/radar-chart.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/radar-chart.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy radar-chart.tsx and radar-chart.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { RadarChart } from '@/components/sundae/radar-chart'
<RadarChart />Props
| Prop | Type | Default |
|---|---|---|
axes*Axis names. | string[] | — |
series*Two series, values 0–100. | { name: string; values: number[] }[] | — |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- Axis labels are buttons; the active axis values are announced.
- A table fallback lists all values for screen readers.
- Reduced motion removes the movement and keeps every state change.
Customization
- Colours are CSS custom properties on .sd-rdr; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
FAQ
- Is Radar Chart free?
- Radar Chart is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Radar Chart?
- Run npx shadcn@latest add https://sundaeui.dev/r/radar-chart.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Radar Chart support keyboard and screen readers?
- Axis labels are buttons; the active axis values are announced. A table fallback lists all values for screen readers.
- Does Radar Chart respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All data →Stacked Bars
Data · Refined- Pro
Scrub Sparkline
Data · Refined - Pro
Tick Gauge
Data · Refined - Pro
Donut Breakdown
Data · Refined - Pro
Range Line Chart
Data · Refined Weather Forecast
Data · Refined