webdevpuneet.com

Related Snippets

93 in Charts category
1–6 of 60

Treemap

Org Chart

ApexCharts Dark/Light Theme Toggle with PNG, SVG and CSV Export

ApexCharts Likert Survey Stacked Bar Chart

ApexCharts Line Chart with Annotations and Target Lines

ApexCharts Donut Chart with Live Center Total

Waterfall Chart — Bridge Chart HTML CSS JS Snippet

Waterfall Chart · Charts · Plain HTML, CSS & JS · Live preview

CategoryCharts
TagsCSS AnimationData Visualization

Copy & paste

Source Code

<div class="wf-card">
  <div class="wf-head">
    <div>
      <h2 class="wf-title">Revenue bridge</h2>
      <div class="wf-sub">Q2 → Q3 · thousands</div>
    </div>
    <button class="wf-replay" onclick="replay()">↻ Replay</button>
  </div>

  <div class="wf-plot"><div class="wf-chart" id="wfChart"></div></div>

  <div class="wf-legend">
    <span><i class="wf-k total"></i>Total</span>
    <span><i class="wf-k inc"></i>Increase</span>
    <span><i class="wf-k dec"></i>Decrease</span>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Running-total engine
build tracks a cumulative total so each step floats at the previous level, and a null closing total auto-computes the net.
Value-positioned floating bars
Bars are placed by bottom and height from their start/end levels — increases sit above, decreases hang below the running total.
Dotted step connectors
A connector at each bar's end level links it to the next bar's start, making the cascade read as one continuous bridge.
Auto-scaled height
The scale derives from the max level with headroom, so the tallest bar never clips and small steps stay visible.
Transform grow-in
Bars rise via scaleY from a bottom origin with staggered animation-delay, a compositor-smooth cascade that exports cleanly.
Responsive percentages
Bar x-positions and widths use percentages, so the chart fluidly fills its container with no resize handling.
Signed value labels
Each bar shows +/− changes or a toLocaleString total, colour-matched to increase/decrease/total.
Data-driven + replay
The chart regenerates from one DATA array; a replay button rebuilds it to re-run the animation.

About this UI Snippet

Waterfall Chart — Floating Increase/Decrease Bars, Running Totals & Dotted Connectors

Screenshot of the Waterfall Chart snippet rendered live

A waterfall (or bridge) chart shows how a starting value becomes an ending value through a sequence of positive and negative changes — revenue bridges, budget variance, profit breakdowns, headcount changes. Each step "floats" at the running total left by the previous step, so the eye walks down (or up) the cascade. This snippet builds one in plain HTML, CSS, and vanilla JavaScript from a simple data array: floating increase/decrease bars, full-height total columns, dotted connectors, value labels, and a staggered grow-in animation.

Running-total math

build walks the data, tracking a cum running total. A total row (opening/closing) draws a full bar from zero to its value; a step row floats from the current total to the new total (cum + value), then updates cum. It records each bar's start and end levels and the overall maxLevel for scaling. The closing total can be left as null to auto-compute the net from the accumulated steps — so the "Net" bar always reflects the real sum.

Floating bars positioned by value

Each bar is absolutely positioned: its bottom is the lower of its start/end levels times a scale factor, and its height is the difference. Increase steps are green and sit above the previous total; decrease steps are red and hang below it; totals are full-height blue columns from the baseline. The scale is derived from maxLevel with headroom so the tallest bar never touches the top. Bar x-positions and widths use percentages, so the chart is responsive without any resize code.

Dotted connectors

Between consecutive bars, a dotted horizontal line is drawn at the end level of the left bar — which is exactly the start level of the next — visually linking each step to where the next one begins. These connectors are what make a waterfall readable as a continuous bridge rather than a set of disconnected bars.

Staggered grow-in

Bars animate up from the baseline with a wf-grow keyframe using transform: scaleY and transform-origin: bottom, with a per-bar animation-delay so the cascade builds left to right. Using a transform (not height) keeps the animation on the compositor and means it exports cleanly to utility frameworks. A replay button rebuilds the chart to replay the animation.

Data-driven and value-labelled

The whole chart regenerates from the DATA array, and each bar shows its signed value (+800, −300, or a total formatted with toLocaleString). Swap the array for your real figures and the bridge redraws. Pair this with a bar chart for categories, a funnel chart for conversion drop-off, or a metric card grid for headline numbers.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA "Revenue bridge" card appears and the bars grow up from the baseline left to right, forming the waterfall.
  2. 2
    Read the bridgeBlue totals anchor the start and net; green bars step up for increases and red bars step down for decreases between them.
  3. 3
    Follow the connectorsDotted lines link the top of each bar to the start of the next, showing the running total carrying across.
  4. 4
    Check the valuesEach bar is labelled with its signed change (+800, −300) or its total, formatted with thousands separators.
  5. 5
    Replay the animationClick "↻ Replay" to rebuild and re-run the staggered grow-in.
  6. 6
    Plug in your dataEdit the DATA array — use type:'total' for anchors (value null auto-computes the net) and type:'step' with signed values for changes.

Real-world uses

Common Use Cases

Revenue and profit bridges
Show how opening revenue becomes closing revenue through sales, upsells, refunds, and costs. Pair with a metric card grid.
Budget variance analysis
Walk from budget to actual through over/under line items, with red and green making variance obvious.
Headcount and inventory changes
Bridge starting to ending counts through hires/attrition or stock in/out flows.
Cohort and churn breakdowns
Start MRR → new → expansion → churn → end MRR; complements a funnel chart for the conversion side.
Cost and pricing breakdowns
Show how a base price builds to a final price through fees, discounts, and taxes.
Finance dashboards and reports
A bridge chart in any analytics view; combine with a bar chart and line chart widget.

Got questions?

Frequently Asked Questions

Edit the DATA array: each entry is { label, type, value }. Use type:'total' for anchor columns (set value:null on the final one to auto-compute the net from the steps) and type:'step' with a positive or negative value for each change. build handles cumulative positioning, scaling, connectors, and labels automatically.

The current scale assumes non-negative levels. To support negatives, compute both the min and max level across all bars, map zero to a baseline inside the plot, and position bars relative to that zero line (so decreases below zero hang beneath it). Draw a horizontal zero axis for reference, as financial waterfalls do.

transform: scaleY with a bottom origin runs on the GPU and, importantly for this site's framework exports, Tailwind's transition/animate utilities handle transforms cleanly while raw height animation does not convert reliably. The bar's final height is set inline; the keyframe just scales it up from the baseline.

The bars are decorative, so provide the data as text: each bar is labelled with its value, and you should add an aria-label per bar summarising it ("Refunds: −300, running total 2,150"). Offer an off-screen data table of label/change/running-total for screen-reader users, and give the chart container a role="img" with a descriptive label.

In React, compute the bars with useMemo from your data array (running total, start/end, scale) and render them as positioned <div>s with inline styles — no manual DOM building. In Vue, use a computed that returns the bar models and v-for. In Angular, compute in the component and *ngFor. The scaleY keyframe and connector CSS port unchanged.