FunnelChart

깔때기(funnel) 차트 컴포넌트예요. 단계별로 줄어드는 전환 수치를 시각화할 때 사용해요. recharts의 FunnelChart를 기반으로 해요.

출처: 문서

본문

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

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

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

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

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

각 세그먼트 옆에 라벨을 표시하려면 withLabels prop을 설정하세요. labelPosition prop으로 해당 세그먼트에 대한 라벨의 위치(Left, Inside, Right)를 제어할 수 있어요.

size prop으로 차트의 너비와 높이를 제어할 수 있어요. h style prop으로 이 동작을 재정의할 수 있어요.

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

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

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

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

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

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