워터폴 차트

증감 단계가 순서대로 쌓여 합계에 도달하는 구성 분해를 보여준다: 손익 구성 등. 증가는 success·감소는 danger·합계는 primary(극성 상태색)로 칠하고, 단계 사이 점프는 헤어라인 커넥터로 잇는다. kind='total' 단계는 증감이 아니라 그 시점의 누적값을 그린다.

상태

050100

매출원가판관비영업익

손익 분해

활용 방법

월 손익 구성

delta 단계는 부호로 증감을 나타내고(+ 증가 / − 감소), kind='total' 단계는 그 지점까지의 누적값을 0 부터 그린다. hover 하면 증감액과 누적값이 title 로 나온다.

Preview

0만500만1,000만1,500만

매출원가인건비판관비영업익

tsx

<WaterfallChart
  height={200}
  steps={[
    { label: "매출", value: 1200 },
    { label: "원가", value: -520 },
    { label: "인건비", value: -280 },
    { label: "판관비", value: -160 },
    { label: "영업익", value: 0, kind: "total" },
  ]}
  formatValue={(v) => `${v.toLocaleString("ko-KR")}만`}
/>

속성

이름	타입	기본값	설명
steps	WaterfallStep[]	-	단계 배열: { label, value(증감액; +증가 −감소), kind? }
kind	"delta" \| "total"	"delta"	total 이면 value 무시하고 그 시점 누적값을 그린다
height	number	200	플롯 영역 높이(px)
formatValue	(v: number) => string	ko-KR 콤마	y축·툴팁 값 포맷