Treemap

Treemap

트리맵 차트 컴포넌트예요. 계층적 데이터를 중첩된 사각형 집합으로 표시해요. recharts의 Treemap을 기반으로 해요.

출처: 문서

본문

Usage

Treemap은 recharts의 Treemap 컴포넌트를 기반으로 해요. 계층적 데이터를 중첩된 사각형 집합으로 표시해요.

import { Treemap } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return <Treemap data={data} />;
}

Nested data

Treemap은 중첩 데이터를 지원해요. 각 데이터 항목은 children 배열을 가질 수 있어요. 부모 노드의 color 속성은 모든 자식에 사용돼요.

Node color

다른 컴포넌트처럼 theme에서 색을 참조할 수 있어요(blue, red.5, orange.7 등). 유효한 CSS 색상 값도 허용돼요.

autoContrast

Treemap은 각 노드의 배경 색에 따라 텍스트 색을 자동으로 조정해 읽기 쉬운 라벨을 보장하는 autoContrast prop을 지원해요.

import { Treemap } from '@mantine/charts';

const data = [
  { name: 'USA', value: 400, color: 'indigo.0' },
  { name: 'India', value: 300, color: 'yellow.1' },
  { name: 'Japan', value: 100, color: 'teal.1' },
  { name: 'Other', value: 200, color: 'gray.2' },
];

function Demo() {
  return <Treemap data={data} autoContrast />;
}

Node stroke

strokeWidth prop으로 각 노드 주위 stroke의 너비를 제어할 수 있어요. stroke 색을 바꾸려면 strokeColor prop을 사용하세요.

Disable tooltip

툴팁을 비활성화하려면 withTooltip={false}로 설정하세요.

더 알아보기 (Learn more)

• WaffleChart
• SunburstChart