RadarChart
다변량 데이터를 방사형으로 시각화하는 차트 컨테이너.
개요
RadarChart는 recharts의 RadarChart를 얇게 래핑한 컨테이너입니다. PolarGrid, PolarAngleAxis, PolarRadiusAxis와 Radar 시리즈를 조합합니다.
Radar시리즈가fill,stroke,dot,activeDot,label$토큰 지원- Polar 축은
tick.typo,tick.fill기본값$caption-1/$text-3 - **여러
Radar**를 겹쳐 다중 대상 비교
언제 사용하나요
- 다변량 비교 — 3~8개 지표의 점수를 한눈에
- 대상 간 비교 — 후보 A vs B의 스킬 프로필
- 강/약점 시각화 — 형태로 balance 파악
언제 사용하면 안 되나요
- 지표가 9개 이상 → 가독성 저하, 분리 차트 권장
- 정확한 값 비교 →
BarChart - 시간 추이 →
LineChart
Usage
기본 사용법
() => { const data = [ { skill: '기획', score: 80 }, { skill: '디자인', score: 65 }, { skill: '개발', score: 90 }, { skill: '마케팅', score: 55 }, { skill: '운영', score: 70 }, { skill: '분석', score: 85 }, ]; return ( <ResponsiveContainer width="100%" height={320}> <RadarChart data={data}> <PolarGrid /> <PolarAngleAxis dataKey="skill" /> <PolarRadiusAxis /> <Radar dataKey="score" fill="$primary-50" stroke="$primary-50" fillOpacity={0.4} /> <ChartTooltip /> </RadarChart> </ResponsiveContainer> ); }
다중 레이어
여러 Radar를 겹쳐 비교합니다.
() => { const data = [ { skill: '기획', A: 80, B: 65 }, { skill: '디자인', A: 65, B: 85 }, { skill: '개발', A: 90, B: 70 }, { skill: '마케팅', A: 55, B: 80 }, { skill: '운영', A: 70, B: 75 }, ]; return ( <ResponsiveContainer width="100%" height={320}> <RadarChart data={data}> <PolarGrid /> <PolarAngleAxis dataKey="skill" /> <PolarRadiusAxis /> <Radar dataKey="A" fill="$primary-50" stroke="$primary-50" fillOpacity={0.35} /> <Radar dataKey="B" fill="$teal-50" stroke="$teal-50" fillOpacity={0.35} /> <ChartTooltip /> <ChartLegend /> </RadarChart> </ResponsiveContainer> ); }
fillOpacity (진하기 조절)
fillOpacity 값으로 영역 채우기 투명도를 조절합니다. 0.2~0.8 범위에서 겹치는 레이어를 구분합니다.
() => { const data = [ { subject: '팔로워', A: 85 }, { subject: '참여율', A: 72 }, { subject: '도달률', A: 90 }, { subject: '콘텐츠품질', A: 68 }, { subject: '성장률', A: 55 }, { subject: '브랜드적합도', A: 92 }, ]; return ( <VStack $css={{ gap: '$spacing-400' }}> <ResponsiveContainer width="100%" height={240}> <RadarChart data={data}> <PolarGrid /> <PolarAngleAxis dataKey="subject" /> <PolarRadiusAxis angle={30} domain={[0, 100]} /> <Radar dataKey="A" fill="$primary-50" stroke="$primary-50" fillOpacity={0.8} /> <ChartTooltip /> </RadarChart> </ResponsiveContainer> <ResponsiveContainer width="100%" height={240}> <RadarChart data={data}> <PolarGrid /> <PolarAngleAxis dataKey="subject" /> <PolarRadiusAxis angle={30} domain={[0, 100]} /> <Radar dataKey="A" fill="$primary-50" stroke="$primary-50" fillOpacity={0.2} /> <ChartTooltip /> </RadarChart> </ResponsiveContainer> </VStack> ); }
PolarGrid 배경 채우기
PolarGrid에 fill을 지정하면 그리드 배경에 색이 채워집니다.
() => { const data = [ { subject: '팔로워', A: 85 }, { subject: '참여율', A: 72 }, { subject: '도달률', A: 90 }, { subject: '콘텐츠품질', A: 68 }, { subject: '성장률', A: 55 }, { subject: '브랜드적합도', A: 92 }, ]; return ( <ResponsiveContainer width="100%" height={300}> <RadarChart data={data}> <PolarGrid fill="$gray-10" /> <PolarAngleAxis dataKey="subject" /> <PolarRadiusAxis angle={30} domain={[0, 100]} /> <Radar dataKey="A" fill="$primary-50" stroke="$primary-50" fillOpacity={0.6} /> <ChartTooltip /> </RadarChart> </ResponsiveContainer> ); }
Custom Shape (dot 표시)
dot에 오브젝트를 전달해 각 꼭짓점에 점을 렌더링합니다.
() => { const data = [ { subject: '팔로워', A: 85 }, { subject: '참여율', A: 72 }, { subject: '도달률', A: 90 }, { subject: '콘텐츠품질', A: 68 }, { subject: '성장률', A: 55 }, { subject: '브랜드적합도', A: 92 }, ]; return ( <ResponsiveContainer width="100%" height={300}> <RadarChart data={data}> <PolarGrid /> <PolarAngleAxis dataKey="subject" /> <PolarRadiusAxis angle={30} domain={[0, 100]} /> <Radar dataKey="A" fill="$teal-50" stroke="$teal-50" fillOpacity={0.5} dot={{ r: 4, fill: '$teal-50' }} /> <ChartTooltip /> </RadarChart> </ResponsiveContainer> ); }
Tick 타이포그래피
PolarAngleAxis의 tick에 { typo, fill } 오브젝트를 전달합니다. 기본값은 $caption-1 / $text-3.
() => { const data = [ { subject: '팔로워', A: 85 }, { subject: '참여율', A: 72 }, { subject: '도달률', A: 90 }, { subject: '콘텐츠품질', A: 68 }, ]; return ( <ResponsiveContainer width="100%" height={280}> <RadarChart data={data}> <PolarGrid /> <PolarAngleAxis dataKey="subject" tick={{ typo: '$body-1', fill: '$text-1' }} /> <PolarRadiusAxis angle={30} domain={[0, 100]} /> <Radar dataKey="A" fill="$primary-50" stroke="$primary-50" fillOpacity={0.6} /> <ChartTooltip /> </RadarChart> </ResponsiveContainer> ); }
Slot 토큰 — activeDot / label
activeDot/label 모두 오브젝트일 때 $ 토큰 해석. label 오브젝트에는 fontSize-200 / font.sans / $text-2 기본 typography가 자동 병합되며, 소비자 명시값이 우선합니다.
() => { const data = [ { subject: '팔로워', A: 85 }, { subject: '참여율', A: 72 }, { subject: '도달률', A: 90 }, { subject: '콘텐츠품질', A: 68 }, ]; return ( <ResponsiveContainer width="100%" height={300}> <RadarChart data={data}> <PolarGrid /> <PolarAngleAxis dataKey="subject" /> <PolarRadiusAxis angle={30} domain={[0, 100]} /> <Radar dataKey="A" fill="$primary-50" stroke="$primary-50" fillOpacity={0.6} activeDot={{ r: 6, fill: '$primary-30', stroke: '$background-1', strokeWidth: 2 }} label={{ fill: '$text-1', fontSize: 11 }} /> <ChartTooltip /> </RadarChart> </ResponsiveContainer> ); }
Slot 토큰 — dot
() => { const data = [ { skill: '기획', score: 80 }, { skill: '디자인', score: 65 }, { skill: '개발', score: 90 }, { skill: '마케팅', score: 55 }, ]; return ( <ResponsiveContainer width="100%" height={300}> <RadarChart data={data}> <PolarGrid /> <PolarAngleAxis dataKey="skill" /> <Radar dataKey="score" fill="$primary-50" stroke="$primary-50" fillOpacity={0.4} dot={{ r: 4, fill: '$primary-50', stroke: '$background-1', strokeWidth: 2 }} /> <ChartTooltip /> </RadarChart> </ResponsiveContainer> ); }
Props
recharts RadarChart를 래핑합니다. 여기에 명시되지 않은 props는 recharts RadarChart API를 참고하세요.
RadarChart
extends recharts RadarChart
Prop
Type
Radar
extends recharts Radar
Prop
Type
PolarGrid, PolarAngleAxis, PolarRadiusAxis
Building Blocks — Polar 섹션을 참고하세요.