reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
opt-charts40
WaterfallChart
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

WaterfallChart

Chart

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

cartesian
Related docs
bun add @reopt-ai/opt-charts
Install and import
bash
bun add @reopt-ai/opt-charts
tsx
import { WaterfallChart } from "@reopt-ai/opt-charts";

Live preview

Change the width and theme, then interact with the components.

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

WaterfallChart

PropTypeDefaultDescription
dataRequiredWaterfallDataPoint[]—{ name, value, isTotal? } 배열. isTotal 행은 누적합을 0부터 다시 그리고 누적합을 늘리지 않는다. 플래그가 하나도 없으면 마지막에 총합 막대를 덧붙인다 (implicitTotal)
positiveColorstring"var(--opt-success)"증가 막대 색상
negativeColorstring"var(--opt-danger)"감소 막대 색상
totalColorstring—총합 막대 색상. 기본은 첫 카테고리 슬롯 var(--opt-chart-1)
implicitTotalbooleantrueisTotal 행이 없을 때 마지막에 총합 막대를 덧붙인다
heightnumber | `${number}%`300차트 높이
classNamestring—루트 요소에 붙는 CSS 클래스
showGridbooleantrue그리드 표시 여부. 실선 헤어라인
showTooltipbooleantrue툴팁 표시 여부
showLegendbooleantrue증가·감소·총합 세 색의 뜻을 적은 범례 표시 여부
animatebooleantruefalse면 애니메이션을 끈다. 그 외에는 prefers-reduced-motion을 따른다
marginChartMarginCHART_MARGIN차트 여백 (top/right/bottom/left)
valueFormatter(value: number) => string—값 축 눈금 포맷터. 기본은 로케일 compact 숫자
localestring—기본 숫자 포맷의 로케일. 생략하면 런타임 로케일
loadingbooleanfalse새 데이터를 기다리는 동안 현재 렌더를 흐리게 유지
accessibleTablebooleanfalse스크린 리더용 숨김 데이터 표를 함께 렌더
emptyStateReactNode—데이터가 없을 때 보일 내용. 생략하면 labels.empty
labelsWaterfallChartLabels—사용자 노출 문자열 (empty, summaryCaption, categoryColumn, valueColumn, total, increase, decrease, legend, chartName). 기본은 영어
tooltipOptionsChartTooltipContentProps—ChartTooltipContent에 그대로 넘길 옵션
aria-labelstring—스크린 리더용 레이블. 생략하면 차트 종류와 시리즈 이름으로 만든다
aria-describedbystring—차트를 설명하는 요소의 id
View test results

테스트 커버리지

2026년 7월 9일

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

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

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

Related components

opt-charts

LineChart

Charts

Visualize trends and changes over time with a line chart for continuous data.

opt-charts

BarChart

Charts

Compare values across categories with a bar chart.

opt-charts

AreaChart

Charts

Display trends and time series with filled areas and optional gradients.

opt-charts

Sparkline

Charts

Show compact inline trends in stat cards, table cells, and other small spaces.

opt-charts

ScatterChart

Charts

Compare two variables in a scatter plot and optionally size points with zKey.

opt-charts

BubbleChart

Charts

Visualize three dimensions through x and y positions and bubble size using the ScatterChart renderer.

PreviousCalendarHeatmapNextBubbleChart