Oopt-charts

Prop

타입

기본값

설명

data*

SunburstNode[]

—

계층 노드 배열 (name, value, children, color)

size

number

320

차트 지름(px)

showLabels

boolean

true

텍스트가 호 길이 안에 들어가는 arc에만 레이블 표시

showLegend

boolean

—

최상위 노드 범례 표시 여부. 기본은 둘 이상일 때만

valueFormatter

(value: number) => string

—

값을 표시 문자열로 바꾸는 함수. 기본은 locale 인식 숫자 포맷

accessibleTable

boolean

false

스크린 리더용으로 숨긴 데이터 표를 함께 렌더링

labels

SunburstLabels

—

지역화 문자열 (empty·summaryCaption·chartName·nameColumn·parentColumn·valueColumn·shareColumn·legendAriaLabel)

locale

string

—

기본 숫자 포맷에 쓰는 locale. 생략하면 런타임 locale

loading

boolean

false

새 데이터를 불러오는 동안 현재 렌더를 흐리게 유지

emptyState

React.ReactNode

—

데이터가 없을 때 보여줄 내용. 기본은 labels.empty

className

string

—

루트 요소에 붙는 CSS 클래스

aria-label

string

—

스크린 리더용 레이블. 생략하면 차트 종류와 항목 이름으로 만든다

aria-describedby

string

—

차트를 설명하는 요소의 id

Sunburst

visual

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

100%

지역 > 도시 구성

국내
해외

3단계 계층

제품 > 채널 > 화면

제품
마케팅

테스트 커버리지

2026년 7월 9일

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

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

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

Sunburst Props

Prop	타입	기본값	설명
`data`*	`SunburstNode[]`	—	계층 노드 배열 (name, value, children, color)
`size`	`number`	`320`	차트 지름(px)
`showLabels`	`boolean`	`true`	텍스트가 호 길이 안에 들어가는 arc에만 레이블 표시
`showLegend`	`boolean`	—	최상위 노드 범례 표시 여부. 기본은 둘 이상일 때만
`valueFormatter`	`(value: number) => string`	—	값을 표시 문자열로 바꾸는 함수. 기본은 locale 인식 숫자 포맷
`accessibleTable`	`boolean`	`false`	스크린 리더용으로 숨긴 데이터 표를 함께 렌더링
`labels`	`SunburstLabels`	—	지역화 문자열 (empty·summaryCaption·chartName·nameColumn·parentColumn·valueColumn·shareColumn·legendAriaLabel)
`locale`	`string`	—	기본 숫자 포맷에 쓰는 locale. 생략하면 런타임 locale
`loading`	`boolean`	`false`	새 데이터를 불러오는 동안 현재 렌더를 흐리게 유지
`emptyState`	`React.ReactNode`	—	데이터가 없을 때 보여줄 내용. 기본은 labels.empty
`className`	`string`	—	루트 요소에 붙는 CSS 클래스
`aria-label`	`string`	—	스크린 리더용 레이블. 생략하면 차트 종류와 항목 이름으로 만든다
`aria-describedby`	`string`	—	차트를 설명하는 요소의 id

Import

tsx

import { Sunburst } from "@reopt-ai/opt-ui";