FunnelChart
SVG polygon 기반 깔때기 차트 컴포넌트. 데이터를 내림차순 정렬하여 사다리꼴 세그먼트로 시각화합니다. 마우스 오버 시 다크 카드 툴팁(color circle + Name : Value)이 표시됩니다.
인터랙티브 예시
기본 차트
방문관심검토구매재구매
클릭 이벤트
세그먼트를 클릭하면 onPointClick 콜백이 호출됩니다.
방문관심검토구매재구매
범례 숨김
Neck 크기 조절
neckWidth / neckHeight로 깔때기 하단 사각형 영역의 비율을 조절합니다.
방문관심검토구매재구매
빈 상태
데이터가 없습니다
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
series | FunnelChartSeries[] | - | 시리즈 데이터 배열 (첫 번째 시리즈만 사용) |
palettes | string[] | 기본 8색 팔레트 | 시리즈별 색상 배열 |
tooltip | boolean | true | 툴팁 표시 여부 |
legend | boolean | true | 범례 표시 여부 |
showDataLabel | boolean | true | 데이터 라벨 표시 (미사용—텍스트 라벨 제거됨) |
height | number | 350 | 차트 높이 (px) |
neckWidth | number | 0.3 | 하단 neck 너비 비율 (0–1) |
neckHeight | number | 0.25 | 하단 neck 높이 비율 (0–1) |
emptyText | string | "데이터가 없습니다" | 데이터 없을 때 표시 텍스트 |
onPointClick | (data: FunnelChartPointClickData) => void | - | 포인트 클릭 시 콜백 |
visible | boolean | true | 표시 여부 (false면 렌더링 안 함) |
className | string | - | 컨테이너에 적용할 CSS 클래스 |
style | CSSProperties | - | 인라인 스타일 |
children | ReactNode | - | 차트 내부 커스텀 콘텐츠 (recharts 직접 사용) |
FunnelChartSeries
| Field | Type | Required | Description |
|---|---|---|---|
dataSource | Record<string, unknown>[] | ✅ | 시리즈 데이터 배열 |
xName | string | ✅ | 이름(카테고리) 데이터 키 |
yName | string | ✅ | 값 데이터 키 |
name | string | - | 시리즈 이름 (범례 표시) |
width | number | - | 너비 |
FunnelChartPointClickData
| Field | Type | Description |
|---|---|---|
seriesName | string | 클릭된 시리즈 이름 |
seriesIndex | number | 클릭된 시리즈 인덱스 |
xValue | unknown | 클릭된 포인트의 X값 |
yValue | unknown | 클릭된 포인트의 Y값 |
payload | Record<string, unknown> | 클릭된 포인트의 전체 데이터 |
접근성
권장 사항
- ✅ SVG polygon 기반 렌더링
- ✅ 빈 차트 시 대체 텍스트(emptyText) 제공
- ✅ 범례(legend)로 시리즈 구분 제공
관련 컴포넌트
- PyramidChart: 피라미드 차트
Last updated on