Oopt-charts

Prop

타입

기본값

설명

data*

TreemapDataNode[]

—

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

dataKey

string

"value"

면적 계산에 사용할 값 키

height

number | `${number}%`

300

차트 높이

showTooltip

boolean

true

툴팁 표시 여부

animate

boolean

true

false면 애니메이션을 끈다. 그 외에는 prefers-reduced-motion을 따른다

aspectRatio

number

4 / 3

타일 배치가 목표로 하는 가로세로 비율

valueFormatter

(value: number) => string

—

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

accessibleTable

boolean

false

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

labels

TreemapLabels

—

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

tooltipOptions

ChartTooltipContentProps

—

ChartTooltipContent에 그대로 넘길 옵션

locale

string

—

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

loading

boolean

false

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

emptyState

React.ReactNode

—

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

className

string

—

루트 요소에 붙는 CSS 클래스

aria-label

string

—

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

aria-describedby

string

—

차트를 설명하는 요소의 id

Treemap

visual

Show hierarchical proportions as area-scaled rectangles with category colors, tooltips, titles, and keyboard focus.

100%

유입 채널 구성

계층 데이터

지역 > 도시

테스트 커버리지

2026년 7월 9일

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

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

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

Treemap Props

Prop	타입	기본값	설명
`data`*	`TreemapDataNode[]`	—	노드 배열 (name, value, children, color)
`dataKey`	`string`	`"value"`	면적 계산에 사용할 값 키
`height`	number \| `${number}%`	`300`	차트 높이
`showTooltip`	`boolean`	`true`	툴팁 표시 여부
`animate`	`boolean`	`true`	false면 애니메이션을 끈다. 그 외에는 prefers-reduced-motion을 따른다
`aspectRatio`	`number`	`4 / 3`	타일 배치가 목표로 하는 가로세로 비율
`valueFormatter`	`(value: number) => string`	—	값을 표시 문자열로 바꾸는 함수. 기본은 locale 인식 숫자 포맷
`accessibleTable`	`boolean`	`false`	스크린 리더용으로 숨긴 데이터 표를 함께 렌더링
`labels`	`TreemapLabels`	—	지역화 문자열 (empty·summaryCaption·chartName·nameColumn·valueColumn)
`tooltipOptions`	`ChartTooltipContentProps`	—	ChartTooltipContent에 그대로 넘길 옵션
`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 { Treemap } from "@reopt-ai/opt-ui";