Changes that float from the running total, joined by dashed connectors, with totals on the floor; columns grow in one after another — soft gradient fills that fade into the floor.

Outlined Waterfall Chart

Chart

Changes that float from the running total, joined by dashed connectors, with totals on the floor; columns grow in one after another — hairline outlines over a faint tint.

React · Tailwind CSS · Motion

Browse

Home All components 213

Collections

Marketing UI 107 App UI 94 AI 16 Charts 45 Backgrounds 2 Text 43

Charts

Resources

Docs & install Scalar Design

Charts

Waterfall

How a total becomes another, step by step.

2 results

All Marketing UI App UI AI Charts Backgrounds Text

Bar chart Stacked bar Horizontal bar Line chart Area chart Spark chart Pie chart Donut & semi-donut Radial chart Hexagon chart Heatmap Funnel chart Category bar Segmented progress Scatter & bubble Combo chart Waterfall Diverging bar Candlestick Treemap Waffle chart Sankey

2 results

Gradient Waterfall Chart

Chart

Changes that float from the running total, joined by dashed connectors, with totals on the floor; columns grow in one after another — soft gradient fills that fade into the floor.

Outlined Waterfall Chart

Chart

Changes that float from the running total, joined by dashed connectors, with totals on the floor; columns grow in one after another — hairline outlines over a faint tint.

All Marketing UI App UI AI Charts Backgrounds Text