WaterfallChart

visual

Explain changes from a starting value to a total with step bars and distinct increase, decrease, and total colors.

100%

Revenue waterfall

isTotal draws the closing bar from zero (850)

Increase
Decrease
Total

Cumulative below zero

running balance crosses the axis

Increase
Decrease
Total

테스트 커버리지

2026년 7월 9일

생성된 테스트 결과를 찾지 못했습니다.

WaterfallChart 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.

테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.

WaterfallChart Props

Prop	타입	기본값	설명
`data`*	`WaterfallDataPoint[]`	—	{ name, value, isTotal? } 배열. isTotal 행은 누적합을 0부터 다시 그리고 누적합을 늘리지 않는다. 플래그가 하나도 없으면 마지막에 총합 막대를 덧붙인다 (implicitTotal)
`positiveColor`	`string`	`"var(--opt-success)"`	증가 막대 색상
`negativeColor`	`string`	`"var(--opt-danger)"`	감소 막대 색상
`totalColor`	`string`	—	총합 막대 색상. 기본은 첫 카테고리 슬롯 var(--opt-chart-1)
`implicitTotal`	`boolean`	`true`	isTotal 행이 없을 때 마지막에 총합 막대를 덧붙인다
`height`	number \| `${number}%`	`300`	차트 높이
`className`	`string`	—	루트 요소에 붙는 CSS 클래스
`showGrid`	`boolean`	`true`	그리드 표시 여부. 실선 헤어라인
`showTooltip`	`boolean`	`true`	툴팁 표시 여부
`showLegend`	`boolean`	`true`	증가·감소·총합 세 색의 뜻을 적은 범례 표시 여부
`animate`	`boolean`	`true`	false면 애니메이션을 끈다. 그 외에는 prefers-reduced-motion을 따른다
`margin`	`ChartMargin`	`CHART_MARGIN`	차트 여백 (top/right/bottom/left)
`valueFormatter`	`(value: number) => string`	—	값 축 눈금 포맷터. 기본은 로케일 compact 숫자
`locale`	`string`	—	기본 숫자 포맷의 로케일. 생략하면 런타임 로케일
`loading`	`boolean`	`false`	새 데이터를 기다리는 동안 현재 렌더를 흐리게 유지
`accessibleTable`	`boolean`	`false`	스크린 리더용 숨김 데이터 표를 함께 렌더
`emptyState`	`ReactNode`	—	데이터가 없을 때 보일 내용. 생략하면 labels.empty
`labels`	`WaterfallChartLabels`	—	사용자 노출 문자열 (empty, summaryCaption, categoryColumn, valueColumn, total, increase, decrease, legend, chartName). 기본은 영어
`tooltipOptions`	`ChartTooltipContentProps`	—	ChartTooltipContent에 그대로 넘길 옵션
`aria-label`	`string`	—	스크린 리더용 레이블. 생략하면 차트 종류와 시리즈 이름으로 만든다
`aria-describedby`	`string`	—	차트를 설명하는 요소의 id

Import

tsx

import { WaterfallChart } from "@reopt-ai/opt-ui";