DonutChart

도넛 차트 컴포넌트예요. 전체에서 각 부분이 차지하는 비율을 시각화할 때 사용해요. recharts의 PieChart를 기반으로 해요.

출처: 문서

본문

DonutChart는 recharts의 PieChart 컴포넌트를 기반으로 해요.

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

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

범례를 표시하려면 withLegend prop을 설정하세요. 범례는 각 세그먼트의 이름과 색을 표시해요. 범례 항목을 호버하면 해당 세그먼트가 강조돼요.

legendProps prop으로 recharts Legend 컴포넌트에 props를 전달할 수 있어요. 예를 들어 legendProps={{ verticalAlign: 'top' }}은 범례를 차트 위에 표시해요.

각 세그먼트 옆에 라벨을 표시하려면 withLabels prop을 설정하세요. labelsType prop으로 라벨 타입(value, percent, name)을 정할 수 있어요.

size prop으로 차트의 너비와 높이를 제어할 수 있어요. withLabels prop이 설정되면 라벨 공간을 위해 차트 높이가 자동으로 80px 늘어나요. h style prop으로 이 동작을 재정의할 수 있어요.

paddingAngle prop으로 세그먼트 사이의 간격을 제어할 수 있어요.

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

기본적으로 어떤 세그먼트를 호버해도 툴팁은 모든 세그먼트의 데이터를 표시해요. 호버한 세그먼트만 표시하려면 tooltipDataSource="segment"로 설정하세요.

withTooltip={false}로 설정하면 툴팁을 제거할 수 있어요.

차트 중앙에 라벨을 표시하려면 chartLabel prop을 사용하세요. 문자열이나 숫자를 받아요.

startAngle과 endAngle prop으로 차트의 시작/끝 각도를 제어할 수 있어요. 예를 들어 반원 차트를 표시하려면 startAngle={180}, endAngle={0}으로 설정하세요.

startAngle과 endAngle이 설정되어도 차트는 원 전체만큼의 공간을 차지한다는 점에 주의하세요.

strokeWidth prop으로 각 세그먼트 주위 stroke의 너비를 제어할 수 있어요.

stroke 색을 바꾸려면 strokeColor prop을 사용하세요. 다른 컴포넌트처럼 theme에서 색을 참조할 수 있어요. 유효한 CSS 색상 값도 허용돼요.

기본적으로 세그먼트 stroke 색은 body 요소의 배경색(--mantine-color-body CSS 변수)과 같아요. 색상 스킴에 따라 바꾸려면 CSS 변수를 정의해 strokeColor prop에 전달하세요.