SunburstChart

SunburstChart

계층적 데이터를 위한 선버스트(sunburst) 차트 컴포넌트예요. 극좌표로 그린 트리맵처럼 계층 구조를 동심원 링으로 표시해요. recharts의 SunburstChart를 기반으로 해요.

출처: 문서

본문

Usage

SunburstChart는 recharts의 SunburstChart 컴포넌트를 기반으로 해요. 극좌표로 그린 트리맵과 비슷하게 계층적 데이터를 동심원 링으로 표시해요.

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

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

Data format

SunburstChart는 객체 배열을 기대해요. 각 객체는 name과 color 속성을 가져야 해요. 잎(leaf) 노드는 value 속성이 필요하고, 부모 노드는 children 배열을 가질 수 있어요.

export const data = [
  {
    name: 'Frontend',
    color: 'blue.6',
    children: [
      { name: 'React', value: 400 },
      { name: 'Vue', value: 200 },
      { name: 'Angular', value: 150 },
    ],
  },
  {
    name: 'Backend',
    color: 'teal.6',
    children: [
      { name: 'Node', value: 300 },
      { name: 'Python', value: 250 },
    ],
  },
];

Node color

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

Stroke color

strokeColor로 각 섹터 주위 stroke의 색을 바꿀 수 있어요.

Chart size

size prop으로 차트의 너비와 높이를 제어할 수 있어요.

Gap

gap prop으로 섹터와 링 사이의 간격을 제어할 수 있어요.

Labels

withLabels를 설정하면 각 섹터 안에 값 라벨을 표시해요. 라벨에 충분한 공간을 주기 위해 size를 키우는 것을 권장해요.

Disable tooltip

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

더 알아보기 (Learn more)

• Treemap
• SankeyChart