파레토 차트

원인 · 유형별 값을 큰 순서의 막대로, 그 누적 비율을 선으로 보여 주는 표현 전용 차트입니다. threshold(기본 80%)까지 누적되는 항목만 계열색이라 먼저 손볼 소수의 핵심 원인이 드러납니다. 오른쪽에 0~100% 축이 하나 더 있는데, 단위가 다른 두 축을 두지 않는다는 원칙의 문서화된 예외입니다. 누적 비율은 단위가 %로 고정되고 끝이 항상 100%라 축 배율로 선의 기울기가 꾸며지지 않습니다.

상태

핵심 4개나머지누적 비율

0건20건40건60건0%25%50%75%100%

배송 지연파손오배송수량 부족품질포장기타

기본 (80%)

핵심 3개나머지누적 비율

0건20건40건60건0%25%50%75%100%

배송 지연파손오배송수량 부족품질포장기타

threshold 70% · tone

활용 방법

클레임 원인 분석

입력 순서와 상관없이 큰 순서로 정렬해 그린다. 칸에 마우스를 올리거나 탭하면 값 · 비중 · 누적이 나온다.

Preview

핵심 4개나머지누적 비율

0건20건40건60건0%25%50%75%100%

배송 지연파손오배송수량 부족품질포장기타

tsx

<ParetoChart
  items={[
    { label: "배송 지연", value: 42 },
    { label: "파손", value: 25 },
    { label: "오배송", value: 12 },
    // ...
  ]}
  formatValue={(v) => `${v}건`}
/>

속성

이름	타입	기본값	설명
items	ParetoItem[]	-	{ label, value }. 큰 순서로 정렬해 그린다(음수는 0)
threshold	number	80	핵심 원인을 가르는 누적 비율(%). 점선으로 그린다
tone	ChartTone	"primary"	핵심 원인 막대 색(나머지는 muted)
height	number	200	플롯 영역 높이(px)
formatValue	(v: number) => string	ko-KR 콤마	값 포맷