ParetoChart
recharts 기반 파레토 차트 컴포넌트. 내림차순 정렬 바 + 누적 % 라인을 동시에 표시합니다.
개요
첫 번째 시리즈 데이터를 Y값 기준 내림차순으로 정렬하고, 누적 백분율 라인을 오른쪽 Y축에 표시합니다. 품질 관리, 원인 분석 등에 사용합니다.
인터랙티브 예시
기본 차트
빈 상태
데이터가 없습니다
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
series | ParetoChartSeries[] | - | 시리즈 데이터 배열 (첫 번째 시리즈만 사용) |
palettes | string[] | 기본 8색 팔레트 | 시리즈별 색상 배열 |
tooltip | boolean | true | 툴팁 표시 여부 |
legend | boolean | true | 범례 표시 여부 |
xAxisTickFormatter | (value: string) => string | - | X축 틱 포맷터 |
yAxisTickFormatter | (value: number) => string | - | Y축 틱 포맷터 |
useGroupingSeparator | boolean | false | Y축 천 단위 구분자 |
cornerRadius | number | 0 | 바 모서리 둥글기 |
showDataLabel | boolean | false | 바 위에 데이터 라벨 표시 |
showGrid | boolean | true | 그리드 라인 표시 |
height | number | 350 | 차트 높이 (px) |
emptyText | string | "데이터가 없습니다" | 데이터 없을 때 표시 텍스트 |
onPointClick | (data: ParetoChartPointClickData) => void | - | 바 클릭 시 콜백 |
visible | boolean | true | 표시 여부 (false면 렌더링 안 함) |
className | string | - | 컨테이너에 적용할 CSS 클래스 |
style | CSSProperties | - | 인라인 스타일 |
children | ReactNode | - | 차트 내부 커스텀 콘텐츠 (recharts 직접 사용) |
ParetoChartSeries
| Field | Type | Required | Description |
|---|---|---|---|
dataSource | Record<string, unknown>[] | ✅ | 시리즈 데이터 배열 |
xName | string | ✅ | X축 데이터 키 |
yName | string | ✅ | Y축 데이터 키 |
name | string | - | 시리즈 이름 (범례 표시) |
width | number | - | 바 너비 |
ParetoChartPointClickData
| Field | Type | Description |
|---|---|---|
seriesName | string | 클릭된 시리즈 이름 |
seriesIndex | number | 클릭된 시리즈 인덱스 |
xValue | unknown | 클릭된 포인트의 X값 |
yValue | unknown | 클릭된 포인트의 Y값 |
payload | Record<string, unknown> | 클릭된 포인트의 전체 데이터 |
접근성
권장 사항
- ✅ recharts
accessibilityLayer자동 활성화 - ✅ 빈 차트 시 대체 텍스트(emptyText) 제공
- ✅ 범례(legend)로 시리즈 구분 제공
관련 컴포넌트
- BarChart: 바 차트
Last updated on