Treemap

개요

Treemap은 recharts의 Treemap을 얇게 래핑한 독립 차트입니다. 계층 구조(children)를 재귀적으로 해석해 각 항목의 fill/stroke $토큰을 CSS 변수로 변환합니다.

재귀 토큰 해석 — resolveDataTokens 적용으로 깊은 트리도 자동 처리
컨테이너 불필요 — 단독으로 배치 가능

언제 사용하나요

계층 구조 + 비율 — 카테고리 > 하위 카테고리 점유율
콤팩트한 비교 — 많은 항목을 한 화면에 밀집 표시

언제 사용하면 안 되나요

정확한 값 비교 → BarChart
단일 계층 → PieChart 또는 BarChart

Usage

기본 사용법

() => {
const data = [
  { name: '패션', value: 400, fill: '$primary-50' },
  { name: '뷰티', value: 300, fill: '$primary-40' },
  { name: '음식', value: 200, fill: '$primary-30' },
  { name: '여행', value: 150, fill: '$primary-20' },
  { name: '테크', value: 100, fill: '$primary-10' },
];
return (
  <ResponsiveContainer width="100%" height={300}>
    <Treemap data={data} dataKey="value" aspectRatio={4 / 3} stroke="$background-1">
      <ChartTooltip />
    </Treemap>
  </ResponsiveContainer>
);
}

커스텀 팔레트

각 항목에 서로 다른 fill $토큰을 지정해 브랜드 팔레트를 섞을 수 있습니다.

() => {
const data = [
  { name: '패션', value: 400, fill: '$primary-50' },
  { name: '뷰티', value: 300, fill: '$teal-50' },
  { name: '음식', value: 200, fill: '$lightBlue-40' },
  { name: '여행', value: 150, fill: '$gray-50' },
  { name: '테크', value: 100, fill: '$indigo-80' },
];
return (
  <ResponsiveContainer width="100%" height={300}>
    <Treemap data={data} dataKey="value" aspectRatio={4 / 3} stroke="$background-1">
      <ChartTooltip />
    </Treemap>
  </ResponsiveContainer>
);
}

중첩 구조

children을 가진 항목을 재귀적으로 렌더링합니다.

() => {
const data = [
  {
    name: '패션',
    children: [
      { name: '여성의류', value: 200, fill: '$primary-50' },
      { name: '남성의류', value: 120, fill: '$primary-40' },
      { name: '액세서리', value: 80, fill: '$primary-30' },
    ],
  },
  {
    name: '뷰티',
    children: [
      { name: '스킨케어', value: 150, fill: '$teal-50' },
      { name: '메이크업', value: 100, fill: '$teal-40' },
      { name: '헤어케어', value: 50, fill: '$teal-30' },
    ],
  },
];
return (
  <ResponsiveContainer width="100%" height={340}>
    <Treemap data={data} dataKey="value" aspectRatio={4 / 3} stroke="$background-1">
      <ChartTooltip />
    </Treemap>
  </ResponsiveContainer>
);
}

Props

recharts Treemap를 래핑합니다. 여기에 명시되지 않은 props는 recharts Treemap API를 참고하세요.

extends recharts Treemap

Prop

Type

Treemap

On this page