reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
opt-charts40
Sunburst
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

Sunburst

Chart

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

radial
Related docs
bun add @reopt-ai/opt-charts
Install and import
bash
bun add @reopt-ai/opt-charts
tsx
import { Sunburst } from "@reopt-ai/opt-charts";

Live preview

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

100%

지역 > 도시 구성

국내: 72, 66.7%국내서울 (국내): 42, 38.9%서울부산 (국내): 18, 16.7%부산대구 (국내): 12, 11.1%대구해외: 36, 33.3%해외미국 (해외): 20, 18.5%미국일본 (해외): 10, 9.3%일본기타 (해외): 6, 5.6%기타
  • 국내
  • 해외

3단계 계층

제품 > 채널 > 화면

제품: 66, 76.7%제품웹 (제품): 42, 48.8%웹대시보드 (웹): 30, 34.9%대시보드설정 (웹): 12, 14%설정모바일 (제품): 24, 27.9%모바일홈 (모바일): 24, 27.9%홈마케팅: 20, 23.3%마케팅캠페인 (마케팅): 20, 23.3%캠페인
  • 제품
  • 마케팅

Sunburst

PropTypeDefaultDescription
dataRequiredSunburstNode[]—계층 노드 배열 (name, value, children, color)
sizenumber320차트 지름(px)
showLabelsbooleantrue텍스트가 호 길이 안에 들어가는 arc에만 레이블 표시
showLegendboolean—최상위 노드 범례 표시 여부. 기본은 둘 이상일 때만
valueFormatter(value: number) => string—값을 표시 문자열로 바꾸는 함수. 기본은 locale 인식 숫자 포맷
accessibleTablebooleanfalse스크린 리더용으로 숨긴 데이터 표를 함께 렌더링
labelsSunburstLabels—지역화 문자열 (empty·summaryCaption·chartName·nameColumn·parentColumn·valueColumn·shareColumn·legendAriaLabel)
localestring—기본 숫자 포맷에 쓰는 locale. 생략하면 런타임 locale
loadingbooleanfalse새 데이터를 불러오는 동안 현재 렌더를 흐리게 유지
emptyStateReact.ReactNode—데이터가 없을 때 보여줄 내용. 기본은 labels.empty
classNamestring—루트 요소에 붙는 CSS 클래스
aria-labelstring—스크린 리더용 레이블. 생략하면 차트 종류와 항목 이름으로 만든다
aria-describedbystring—차트를 설명하는 요소의 id
View test results

테스트 커버리지

2026년 7월 9일

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

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

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

Related components

opt-charts

PieChart

Charts

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

opt-charts

GaugeChart

Charts

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

opt-charts

RadarChart

Charts

Compare balance across multiple dimensions with polygon radar charts.

opt-charts

RadialBarChart

Charts

Compare progress or proportions across items with concentric rings.

opt-charts

ChartContainer

Charts

Wrap Recharts ResponsiveContainer with accessible attributes and consistent chart styling.

opt-charts

ChartTooltip

Charts

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

PreviousGanttChartNextCandlestickChart