Treemap

Chart

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

heatmap

Related docs

bun add @reopt-ai/opt-charts

Install and import

bash

bun add @reopt-ai/opt-charts

tsx

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

Live preview

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

100%

유입 채널 구성

계층 데이터

지역 > 도시

Treemap

Prop	Type	Default	Description
dataRequired	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

View test results

테스트 커버리지

2026년 7월 9일

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

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

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

Related components

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.

ChartLegend

Charts

Display chart legends as lists, with real buttons for interactive series toggles.

CalendarHeatmap

Charts

Show daily activity across a year in a GitHub-style calendar heatmap.

Heatmap

Charts

Visualize row-by-column intensity while retaining table headings and values for screen readers.

RetentionHeatmap

Charts

Compare cohort retention using color intensity in a heatmap.

Treemap

Chart

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

heatmap

Related docs

bun add @reopt-ai/opt-charts

Install and import

bash

bun add @reopt-ai/opt-charts

tsx

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

Live preview

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

100%

유입 채널 구성

계층 데이터

지역 > 도시

Treemap

Prop	Type	Default	Description
dataRequired	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