RadarChart

Chart

Compare balance across multiple dimensions with polygon radar charts.

radial

Related docs

bun add @reopt-ai/opt-charts

Install and import

bash

bun add @reopt-ai/opt-charts

tsx

import { RadarChart } from "@reopt-ai/opt-charts";

Live preview

Change the width and theme, then interact with the components.

100%

다차원 비교

단일 시리즈

반지름 축 표시

RadarChart

Prop	Type	Default	Description
dataRequired	ChartDataPoint[]	—	차트 데이터 배열. angleKey 열이 축 이름
seriesRequired	RadarSeriesDef[]	—	시리즈 정의 (dataKey, name, color?)
angleKey	string	"name"	축(spoke) 이름으로 쓸 데이터 키
height	number \| `${number}%`	300	차트 높이
className	string	—	루트 요소에 붙는 CSS 클래스
showGrid	boolean	true	폴라 그리드 표시 여부. 실선 헤어라인
showRadiusAxis	boolean	false	반지름 축 눈금 표시 여부
showTooltip	boolean	true	툴팁 표시 여부
showLegend	boolean	—	범례 표시 여부. 생략하면 시리즈가 둘 이상일 때만 보인다
animate	boolean	true	false면 애니메이션을 끈다. 그 외에는 prefers-reduced-motion을 따른다
fillOpacity	number	CHART_MARK.areaOpacity	폴리곤 채우기 불투명도. 겹침이 읽히도록 기본은 워시
strokeWidth	number	CHART_LINE_PROPS.strokeWidth	폴리곤 선 두께 (px)
dot	boolean	false	꼭짓점마다 마커를 그린다. 기본은 폴리곤만
margin	ChartMargin	{ top: 16, right: 48, bottom: 16, left: 48 }	차트 여백. 기본은 축 레이블이 잘리지 않도록 좌우 48px
radiusFormatter	(value: number) => string	—	반지름 축 눈금 포맷터. 기본은 로케일 compact 숫자
locale	string	—	기본 숫자 포맷의 로케일. 생략하면 런타임 로케일
loading	boolean	false	새 데이터를 기다리는 동안 현재 렌더를 흐리게 유지
accessibleTable	boolean	false	스크린 리더용 숨김 데이터 표를 함께 렌더
emptyState	ReactNode	—	데이터가 없을 때 보일 내용. 생략하면 labels.empty
labels	RadarChartLabels	—	사용자 노출 문자열 (empty, summaryCaption, axisColumn, chartName). 기본은 영어
tooltipOptions	ChartTooltipContentProps	—	ChartTooltipContent에 그대로 넘길 옵션
legendOptions	ChartLegendOptions	—	ChartLegendContent에 그대로 넘길 옵션. inactiveKeys에 담긴 dataKey는 범례에서 흐려지고 차트에서도 그려지지 않는다
legendToggle	boolean	true	범례 칩 클릭으로 시리즈를 켜고 끕니다. legendOptions.inactiveKeys를 주면 호출자가 상태를 소유하고, onClick만 주면 클릭을 전달받으면서 차트가 상태를 유지합니다. 마지막 남은 시리즈는 꺼지지 않습니다. false면 정적 범례
aria-label	string	—	스크린 리더용 레이블. 생략하면 차트 종류와 시리즈 이름으로 만든다
aria-describedby	string	—	차트를 설명하는 요소의 id

View test results

테스트 커버리지

2026년 7월 9일

생성된 테스트 결과를 찾지 못했습니다.

RadarChart 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.

테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.

Related components

PieChart

Charts

Visualize proportions with a pie or donut chart using innerRadius. Consider a single metric for a two-part split.

GaugeChart

Charts

Show one KPI or progress value on a 270-degree SVG dial with minimum and maximum ticks.

RadialBarChart

Charts

Compare progress or proportions across items with concentric rings.

Sunburst

Charts

Represent hierarchical proportions as concentric arcs with accessible names, values, percentages, and top-level legends.

ChartContainer

Charts

Wrap Recharts ResponsiveContainer with accessible attributes and consistent chart styling.

ChartTooltip

Charts

Style Recharts tooltips with tooltip semantics and hidden decorative markers through the content prop.

RadarChart

Chart

Compare balance across multiple dimensions with polygon radar charts.

radial

Related docs

bun add @reopt-ai/opt-charts

Install and import

bash

bun add @reopt-ai/opt-charts

tsx

import { RadarChart } from "@reopt-ai/opt-charts";

Live preview

Change the width and theme, then interact with the components.

100%

다차원 비교

단일 시리즈

반지름 축 표시

RadarChart

Prop	Type	Default	Description
dataRequired	ChartDataPoint[]	—	차트 데이터 배열. angleKey 열이 축 이름
seriesRequired	RadarSeriesDef[]	—	시리즈 정의 (dataKey, name, color?)
angleKey	string	"name"	축(spoke) 이름으로 쓸 데이터 키
height	number \| `${number}%`	300	차트 높이
className	string	—	루트 요소에 붙는 CSS 클래스
showGrid	boolean	true	폴라 그리드 표시 여부. 실선 헤어라인
showRadiusAxis	boolean	false	반지름 축 눈금 표시 여부
showTooltip	boolean	true	툴팁 표시 여부
showLegend	boolean	—	범례 표시 여부. 생략하면 시리즈가 둘 이상일 때만 보인다
animate	boolean	true	false면 애니메이션을 끈다. 그 외에는 prefers-reduced-motion을 따른다
fillOpacity	number	CHART_MARK.areaOpacity	폴리곤 채우기 불투명도. 겹침이 읽히도록 기본은 워시
strokeWidth	number	CHART_LINE_PROPS.strokeWidth	폴리곤 선 두께 (px)
dot	boolean	false	꼭짓점마다 마커를 그린다. 기본은 폴리곤만
margin	ChartMargin	{ top: 16, right: 48, bottom: 16, left: 48 }	차트 여백. 기본은 축 레이블이 잘리지 않도록 좌우 48px
radiusFormatter	(value: number) => string	—	반지름 축 눈금 포맷터. 기본은 로케일 compact 숫자
locale	string	—	기본 숫자 포맷의 로케일. 생략하면 런타임 로케일
loading	boolean	false	새 데이터를 기다리는 동안 현재 렌더를 흐리게 유지
accessibleTable	boolean	false	스크린 리더용 숨김 데이터 표를 함께 렌더
emptyState	ReactNode	—	데이터가 없을 때 보일 내용. 생략하면 labels.empty
labels	RadarChartLabels	—	사용자 노출 문자열 (empty, summaryCaption, axisColumn, chartName). 기본은 영어
tooltipOptions	ChartTooltipContentProps	—	ChartTooltipContent에 그대로 넘길 옵션
legendOptions	ChartLegendOptions	—	ChartLegendContent에 그대로 넘길 옵션. inactiveKeys에 담긴 dataKey는 범례에서 흐려지고 차트에서도 그려지지 않는다
legendToggle	boolean	true	범례 칩 클릭으로 시리즈를 켜고 끕니다. legendOptions.inactiveKeys를 주면 호출자가 상태를 소유하고, onClick만 주면 클릭을 전달받으면서 차트가 상태를 유지합니다. 마지막 남은 시리즈는 꺼지지 않습니다. false면 정적 범례
aria-label	string	—	스크린 리더용 레이블. 생략하면 차트 종류와 시리즈 이름으로 만든다
aria-describedby	string	—	차트를 설명하는 요소의 id

View test results

테스트 커버리지

2026년 7월 9일

생성된 테스트 결과를 찾지 못했습니다.

RadarChart 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.

테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.

Related components

PieChart

Charts

Visualize proportions with a pie or donut chart using innerRadius. Consider a single metric for a two-part split.

GaugeChart

Charts

Show one KPI or progress value on a 270-degree SVG dial with minimum and maximum ticks.

RadialBarChart

Charts

Compare progress or proportions across items with concentric rings.

Sunburst

Charts

Represent hierarchical proportions as concentric arcs with accessible names, values, percentages, and top-level legends.

ChartContainer

Charts

Wrap Recharts ResponsiveContainer with accessible attributes and consistent chart styling.

ChartTooltip

Charts

Style Recharts tooltips with tooltip semantics and hidden decorative markers through the content prop.