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