FunnelChart
recharts 기반 깔때기 차트 컴포넌트. 데이터를 내림차순 정렬하여 깔때기 형태로 시각화합니다.
인터랙티브 예시
기본 차트
빈 상태
데이터가 없습니다
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) |
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> | 클릭된 포인트의 전체 데이터 |
접근성
권장 사항
- ✅ recharts
accessibilityLayer자동 활성화 - ✅ 빈 차트 시 대체 텍스트(emptyText) 제공
- ✅ 범례(legend)로 시리즈 구분 제공
관련 컴포넌트
- PyramidChart: 피라미드 차트
Last updated on