퍼널 차트

단계를 거치며 줄어드는 수와 단계 사이 전환율을 보여 주는 표현 전용 차트입니다. 막대는 가운데 정렬이라 깔때기 모양이 되고 폭은 가장 큰 단계 대비 비율입니다. 같은 척도의 크기라 한 색을 쓰고 아래 단계일수록 옅어집니다. 단계 사이에 이전 단계 대비 전환율, 아래에 첫 단계 대비 전체 전환율이 나옵니다. 처음 그려질 때 위 단계부터 막대가 가운데에서 펼쳐집니다.

상태

리드

120건

↓ 62%

상담

74건

↓ 51%

견적

38건

↓ 39%

성사

15건

전체 전환 13%

전환율 표시

리드

120건

상담

74건

견적

38건

성사

15건

전환율 숨김

활용 방법

CRM 영업 파이프라인

단계 이름이 길면 labelW로 라벨 칸을 넓힙니다. 값은 단계에 머문 수가 아니라 그 단계에 도달한 누적 수를 넘깁니다.

Preview

신규 리드

412건

↓ 57%

첫 상담

236건

↓ 50%

견적 발송

118건

↓ 52%

협상

61건

↓ 44%

계약 성사

27건

전체 전환 7%

tsx

<FunnelChart
  labelW={88}
  stages={[
    { label: "신규 리드", value: 412 },
    { label: "첫 상담", value: 236 },
    { label: "견적 발송", value: 118 },
    { label: "협상", value: 61 },
    { label: "계약 성사", value: 27 },
  ]}
  formatValue={(v) => `${v}건`}
/>

속성

이름	타입	기본값	설명
stages	FunnelStage[]	-	단계 배열 { label, value }. 위(처음) 단계부터
tone	ChartTone	"primary"	막대 색(아래 단계일수록 옅어진다)
labelW	number	64	라벨 칸 폭(px)
showConversion	boolean	true	단계 사이 전환율과 전체 전환율
formatValue	(v: number) => string	ko-KR 콤마	값 포맷