Radar Chart
Charts
Data Visualization
Multi-variable comparison for skills, features, and performance metrics with spider/radar visualization.
Preview
Radar chart cards with single and dual series
Skills Assessment
Current vs Target
Current
Target
Team Performance
Q4 2024 metrics
Score
Multiple Series
Compare three products across different features
Product Comparison
Feature analysis
Product A
Product B
Product C
Standalone Chart
RadarChart component without card wrapper
Current Level
Target Level
Props
Component API reference
RadarChart
| Prop | Type | Default | Description |
|---|---|---|---|
data* | Record<string, unknown>[] | — | Data points with values for each axis |
series* | Series[] | — | Series config with key, label, and color |
labelKey* | string | — | Data key for axis labels |
maxValue | number | 100 | Maximum value for scale |
size | number | 300 | Chart size in pixels |
levels | number | 5 | Number of grid levels |
fillOpacity | number | 0.25 | Area fill opacity |
RadarChartCard
| Prop | Type | Default | Description |
|---|---|---|---|
title* | string | — | Card title |
subtitle | string | — | Card subtitle |
Usage
Import and implementation examples
import { RadarChart, RadarChartCard } from '@/blocks/charts/radar-chart'
// Basic Radar Chart
<RadarChart
data={[
{ skill: 'JavaScript', level: 90 },
{ skill: 'React', level: 85 },
{ skill: 'TypeScript', level: 75 },
{ skill: 'Node.js', level: 70 },
{ skill: 'CSS', level: 80 },
]}
series={[
{ key: 'level', label: 'Skill Level', color: 'var(--color-indigo-500)' }
]}
labelKey="skill"
maxValue={100}
/>
// Multiple Series Comparison
<RadarChart
data={productData}
series={[
{ key: 'productA', label: 'Product A', color: 'var(--color-indigo-500)' },
{ key: 'productB', label: 'Product B', color: 'var(--color-teal-500)' },
{ key: 'productC', label: 'Product C', color: 'var(--color-amber-500)' },
]}
labelKey="feature"
maxValue={100}
/>
// Radar Chart Card
<RadarChartCard
title="Skills Assessment"
subtitle="Current vs Target"
data={skillsData}
series={[
{ key: 'current', label: 'Current', color: 'var(--color-indigo-500)' },
{ key: 'target', label: 'Target', color: 'var(--color-teal-500)' },
]}
labelKey="skill"
maxValue={100}
/>Features
Built-in functionality
- Multiple series: Compare multiple data series on one chart
- Interactive hover: Highlight series on hover
- Configurable grid: Adjustable grid levels and max value
- Animated transitions: Smooth animation on data changes
- Legend with highlighting: Click legend to focus series
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Uses role="img" for chart containeraria-label describes the chart contentLegend provides text alternativeKeyboard Navigation
| Key | Action |
|---|---|
| N/A | Radar chart is not keyboard interactive |
Notes
- Consider providing data table alternative
- Legend shows all series with labels
- Color is supplemented with series names