PieChart
PieChart
파이 차트 컴포넌트예요. 전체에서 각 부분이 차지하는 비율을 시각화할 때 사용해요. recharts의 PieChart를 기반으로 해요.
출처: 문서
본문
Usage
PieChart는 recharts의 PieChart 컴포넌트를 기반으로 해요.
import { PieChart } from '@mantine/charts';
import { data } from './data';
function Demo() {
return <PieChart data={data} />;
}
Legend
범례를 표시하려면 withLegend prop을 설정하세요. 범례는 각 세그먼트의 이름과 색을 표시해요. 범례 항목을 호버하면 해당 세그먼트가 강조돼요.
legendProps prop으로 recharts Legend 컴포넌트에 props를 전달할 수 있어요. 예를 들어 legendProps={{ verticalAlign: 'top' }}은 범례를 차트 위에 표시해요.
Segments labels
각 세그먼트 옆에 라벨을 표시하려면 withLabels prop을 설정하세요. labelPosition prop(Inside, Outside)으로 해당 세그먼트에 대한 라벨 위치를 제어할 수 있어요. 세그먼트가 많고 labelPosition="inside"이면 라벨이 겹칠 수 있으니 그럴 땐 labelPosition="outside"를 사용하세요. labelsType prop으로 라벨 타입(value, percent, name)을 정할 수 있어요.
Size
size prop으로 차트의 너비와 높이를 제어할 수 있어요. withLabels와 labelPosition="outside"이 설정되면 라벨 공간을 위해 차트 높이가 자동으로 80px 늘어나요. h, w style props으로 이 동작을 재정의할 수 있어요.
Segment color
다른 컴포넌트처럼 theme에서 색을 참조할 수 있어요(blue, red.5, orange.7 등). 유효한 CSS 색상 값도 허용돼요.
Enable tooltip
툴팁을 활성화하려면 withTooltip prop을 설정하세요.
Tooltip data source
기본적으로 어떤 세그먼트를 호버해도 툴팁은 모든 세그먼트의 데이터를 표시해요. 호버한 세그먼트만 표시하려면 tooltipDataSource="segment"로 설정하세요.
Start and end angle
startAngle과 endAngle prop으로 차트의 시작/끝 각도를 제어할 수 있어요. 예를 들어 반원 차트를 표시하려면 startAngle={180}, endAngle={0}으로 설정하세요.
startAngle과 endAngle이 설정되어도 차트는 원 전체만큼의 공간을 차지한다는 점에 주의하세요.
Segments stroke
strokeWidth prop으로 각 세그먼트 주위 stroke의 너비를 제어할 수 있어요.
stroke 색을 바꾸려면 strokeColor prop을 사용하세요. 다른 컴포넌트처럼 theme에서 색을 참조할 수 있어요. 유효한 CSS 색상 값도 허용돼요.
기본적으로 세그먼트 stroke 색은 body 요소의 배경색(--mantine-color-body CSS 변수)과 같아요. 색상 스킴에 따라 바꾸려면 CSS 변수를 정의해 strokeColor prop에 전달하세요.