Overview
RadarChart displays multi-dimensional data on a spider/radar diagram. Perfect for comparing multiple attributes across products, skills assessments, or feature comparisons. Built on Recharts.
Features
- Multi-axis visualization (3+ dimensions)
- Multiple series comparison
- Customizable axis ranges
- Optional dots on data points
- Legend support for series
- Three size variants (sm, md, lg)
Examples
Basic Radar Chart
Single series radar chart
Multi-Series Comparison
Comparing multiple products or entities
Size Variants
Available size variants
Small
Medium
Large
With ChartCard
Wrapped in ChartCard
Feature Comparison
Product A vs Product B
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
axes | RadarAxis[] | required | Array of axis definitions |
series | RadarSeries[] | required | Array of data series |
showLegend | boolean | false | Show legend for series |
showDots | boolean | false | Show dots on data points |
fillOpacity | number | 0.3 | Fill opacity (0-1) |
size | "sm" | "md" | "lg" | "md" | Chart size |
Usage
import { RadarChart, ChartCard } from '@/ui/components/charts';
// Basic radar chart
<ChartCard title="Skills Assessment">
<RadarChart
axes={[
{ key: 'usability', label: 'Usability', maxValue: 100 },
{ key: 'performance', label: 'Performance', maxValue: 100 },
{ key: 'reliability', label: 'Reliability', maxValue: 100 },
{ key: 'security', label: 'Security', maxValue: 100 },
{ key: 'design', label: 'Design', maxValue: 100 },
]}
series={[
{
name: 'Product A',
data: { usability: 85, performance: 70, reliability: 90, security: 75, design: 80 },
},
]}
/>
</ChartCard>
// Multi-series comparison
<RadarChart
axes={[...]}
series={[
{ name: 'Product A', data: {...} },
{ name: 'Product B', data: {...} },
]}
showLegend
showDots
/>