5b:I[473921,["/creators-assets/_next/static/immutable/chunks/2bxtessbrg0z1.js","/creators-assets/_next/static/immutable/chunks/0lpbs3388m8i9.js","/creators-assets/_next/static/immutable/chunks/1cyyov0z5q-kt.js","/creators-assets/_next/static/immutable/chunks/3283ev4bymz-y.js","/creators-assets/_next/static/immutable/chunks/1tyeiicl34tqo.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/19vaojedolulr.js","/creators-assets/_next/static/immutable/chunks/1zalsqf-ioaic.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/09klh1t314i6_.js","/creators-assets/_next/static/immutable/chunks/0vxt9zvn936s0.js","/creators-assets/_next/static/immutable/chunks/1eyot9c9uwocm.js","/creators-assets/_next/static/immutable/chunks/15qb5jvtj_j-a.js","/creators-assets/_next/static/immutable/chunks/3p2-jhwmdt2w4.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/102julo6bufcv.js","/creators-assets/_next/static/immutable/chunks/2e-sz6cfsc9_9.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/3uo-268z2xnq9.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/2ypcsbrcjzeke.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3nnozhk_k4v6s.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/3xmobvbzj3637.js","/creators-assets/_next/static/immutable/chunks/26fs9mkd8gzie.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/21ae0xqjlej6m.js","/creators-assets/_next/static/immutable/chunks/3xnhxg14xjx1h.js","/creators-assets/_next/static/immutable/chunks/0q4_4jbe5r70f.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/2warb3xv9rce7.js","/creators-assets/_next/static/immutable/chunks/1tvhyiuh-gmez.js","/creators-assets/_next/static/immutable/chunks/3un-l23eued0s.js","/creators-assets/_next/static/immutable/chunks/0u_jiik6ovv_e.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js"],"PostDetailCard"] 5c:T6f5,

■ What it does

Waterfall Chart shows how a starting number turns into a final number — one step at a time. Add your items, pick Increase or Decrease for each, and the floating bars, dotted connector lines and totals are drawn for you.

Perfect for pricing breakdowns, revenue-to-profit stories, budget reports, "where does the money go" sections, and investor or fintech landing pages.

■ Customizable properties

- Items — label, type (Start, Increase, Decrease, Subtotal, Total) and value for each step

- Direction — vertical or horizontal

- Value labels — outside or inside the bars, with optional +/− signs

- Number format — currency symbol, thousands separator, decimals, suffix, and auto k/M shortening

- Colors — increase, decrease, total and start, plus text, grid, connector and background

- Axis — auto "nice number" ticks, grid lines and a zero baseline

- Tooltip — item, value and running total on hover or focus

- Animation — bars grow in one after another (stagger speed adjustable)

- Bar width, corner radius, padding and fonts

■ Need help?

Reach out anytime at hello@brandingupstudio.com — we usually reply within 72 hours.

Custom edits are available from $75/hr.

■ More resources

Explore more components at BrandingUp → https://brandingupstudio.com

Built with code but fully customizable via property controls — no coding needed.

Unlink is not provided so we can keep delivering updates. When an update is available, just click the Update button on the component.

58:[["$","$L5b",null,{"post":{"id":"01a1201f-0553-7058-8d73-4906b51a8c86","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"cc7993de-4f5d-4209-b3f0-695614bf8a8b","name":"BrandingUp","slug":"-ds491f","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cc7993de-4f5d-4209-b3f0-695614bf8a8b/55t3m3ms","followed":false,"followsYou":false},"media":[],"resources":[{"id":"JwY30OFqVUDs6rsYp4FH","resolved":true,"title":"15 Waterfall Chart","body":"$5c","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"■ What it does"}]},{"type":"paragraph","content":[{"type":"text","text":"Waterfall Chart shows how a starting number turns into a final number — one step at a time. Add your items, pick Increase or Decrease for each, and the floating bars, dotted connector lines and totals are drawn for you."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Perfect for pricing breakdowns, revenue-to-profit stories, budget reports, \"where does the money go\" sections, and investor or fintech landing pages."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"■ Customizable properties"}]},{"type":"paragraph","content":[{"type":"text","text":"- Items — label, type (Start, Increase, Decrease, Subtotal, Total) and value for each step"}]},{"type":"paragraph","content":[{"type":"text","text":"- Direction — vertical or horizontal"}]},{"type":"paragraph","content":[{"type":"text","text":"- Value labels — outside or inside the bars, with optional +/− signs"}]},{"type":"paragraph","content":[{"type":"text","text":"- Number format — currency symbol, thousands separator, decimals, suffix, and auto k/M shortening"}]},{"type":"paragraph","content":[{"type":"text","text":"- Colors — increase, decrease, total and start, plus text, grid, connector and background"}]},{"type":"paragraph","content":[{"type":"text","text":"- Axis — auto \"nice number\" ticks, grid lines and a zero baseline"}]},{"type":"paragraph","content":[{"type":"text","text":"- Tooltip — item, value and running total on hover or focus"}]},{"type":"paragraph","content":[{"type":"text","text":"- Animation — bars grow in one after another (stagger speed adjustable)"}]},{"type":"paragraph","content":[{"type":"text","text":"- Bar width, corner radius, padding and fonts"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"■ Need help?"}]},{"type":"paragraph","content":[{"type":"text","text":"Reach out anytime at hello@brandingupstudio.com — we usually reply within 72 hours."}]},{"type":"paragraph","content":[{"type":"text","text":"Custom edits are available from $75/hr."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"■ More resources"}]},{"type":"paragraph","content":[{"type":"text","text":"Explore more components at BrandingUp → "},{"type":"text","text":"https://brandingupstudio.com","marks":[{"type":"link","attrs":{"href":"https://brandingupstudio.com","target":"_blank","rel":"noopener noreferrer nofollow"}}]}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Built with code but fully customizable via property controls — no coding needed."}]},{"type":"paragraph","content":[{"type":"text","text":"Unlink is not provided so we can keep delivering updates. When an update is available, just click the Update button on the component."}]}]},"introduction":"Auto-total bridge chart, animated","slug":"15-waterfall-chart","author":{"framerUserId":"cc7993de-4f5d-4209-b3f0-695614bf8a8b","name":"BrandingUp","slug":"-ds491f","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cc7993de-4f5d-4209-b3f0-695614bf8a8b/55t3m3ms","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cc7993de-4f5d-4209-b3f0-695614bf8a8b/01a11fe4-a3b5-7020-a3c2-d54dd2a463f3.jpg","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-09T10:04:25.614Z","updatedAt":"2026-10-09T10:04:25.614Z","publishedAt":"2026-10-09T10:04:25.604Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://small-convention-270138.framer.app/waterfall-chart","price":"9","paymentUrl":"https://brandingup.lemonsqueezy.com/checkout/buy/edd0c60b-48f9-4fdc-8e4e-54c7ddda91f1","workshop":false,"categories":[{"id":"51314a1b-a5bd-4ae8-acf0-bd3d5058c367","name":"Charts","slug":"charts"}],"lastSaveId":"XXoT5pg3yp6P6N6BiJ5j","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-09T10:04:26.325Z","updatedAt":"2026-10-09T10:04:26.325Z","reported":false,"type":"post"}}],"$L5d"]

Suggested for you