NetFlow
NetFlow mirrors inflow and outflow on one shared scale and rides the net line on top.
- encodes
- mirrored area extent around zero + net line position
- precision
- medium — the net line restores the precise decision value
- nodes
- ≤ 6
Money came in, money went out, and the number you act on is what's left. NetFlow draws inflow as an area above a zero
baseline and outflow mirrored below it on one shared magnitude scale, never independently scaled to balance the
picture, with the net line (in − out) on top. Gross and net answer different questions, and one cell answers both.
Both areas anchor at zero, the net line is a plain in − out and is never smoothed, and its sign is stated in the
label's text, so direction is never carried by color alone.
Install
import { NetFlow } from "@microcharts/react/net-flow";// months — real values under “Sample data” below<NetFlow data={months} title="Monthly cash flow" />Sample data
// monthly cash flow (values in $k) — mostly net-positive, two months in the redconst months = [ { in: 42, out: 31 }, { in: 38, out: 35 }, { in: 45, out: 29 }, { in: 40, out: 44 }, { in: 52, out: 38 }, { in: 48, out: 41 }, { in: 55, out: 36 }, { in: 50, out: 47 }, { in: 58, out: 39 }, { in: 44, out: 52 }, { in: 60, out: 41 }, { in: 57, out: 43 },];Try it
When to use it
Use it for cash flow per account row, in vs out (signups vs churn) in a KPI card, and any in-vs-out where the net is the decision. For a single net series use Sparkline; for one period's split use Delta or SegmentedBar.
Sizing
Variants
The net label and accessible summary both follow format/locale: 38000 reads "38.000" under de-DE rather than the
English "38,000".
Edge cases
A single period always renders as mirrored bars, never an area, since an area drawn through one point would imply
continuity the data doesn't have. in/out are magnitudes: a negative value is invalid input rather than a reversed
direction, so it is coerced to 0. When every period's magnitudes are zero (all periods coerced or genuinely empty),
NetFlow draws only the zero baseline, with no areas, no bars, and no net line, and the accessible name says so plainly:
"No flow across 1 period."
Four homes
Accessibility
The accessible name pairs the net with its gross and counts the positive periods: "Net +14 last period; in 57 vs out 43; net positive 4 of 6 periods." The interactive entry steps the periods and announces inflow, outflow, and the signed net together.
The interactive entry follows the shared interaction contract:
arrow keys rove between units on both axes, Home and End jump to the ends, and a click, tap, Enter or
Space selects a unit — pinning its readout so it survives blur, until you select it again or press Escape.
On touch, a tap pins and a drag scrubs.
Props
| Prop | Type | Notes |
|---|---|---|
| data* | { in; out }[] | Periods, oldest first — inflow and outflow magnitudes (both ≥ 0). |
| mode | "area" | "bars" | Mirrored areas (default) or discrete columns for few periods. |
| net | boolean | The net line (in − out). Default true. |
| positive | "up" | "down" | Which direction is good — 'down' for debt-paydown contexts. |
| label | "last" | "none" | Signed net in a right gutter. |
| animate | boolean | interactiveOpt-in entrance motion when the chart mounts client-side — add import "@microcharts/react/motion" once. Inert on the server, on hydrated server HTML, and under prefers-reduced-motion. |
Plus the shared grammar — data, domain, color, title, summary, format — and the layout props (width, height, className, style) that every chart accepts. Interactive entries also share animate and live, and — wherever a chart has more than one navigable unit — onActive, onSelect, selectedIndex and defaultSelectedIndex; and — wherever the chart shows a hover value — readout. See the shared grammar.