Revenue Bridge Chart React component
A revenue waterfall that derives closing MRR from an opening balance and signed movements, with period comparisons, connectors and accessible balance inspection.
About the Revenue Bridge Chart component
Revenue Bridge Chart connects an opening balance to a calculated closing balance through signed movements. Indigo bars show balances; muted green and rose show increases and decreases. Dashed connectors trace the running balance.
When to use it
Explain monthly recurring revenue changes by acquisition, expansion and churn.
Compare periods while retaining an inspectable opening-to-closing reconciliation.
Installation
Add the Revenue Bridge Chart component to your project with the shadcn CLI. It lands in components/revenue-bridge-chart.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/revenue-bridge-chartProps
<RevenueBridgeChart /> accepts 7 props, all optional. It also accepts the usual <section> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title | string | "What moved revenue" |
| subtitle | string | "From opening to closing MRR. Every change accounted for." |
| periods Each period provides an opening balance and signed movements. Closing is calculated. | { label: string; start: number; steps: RevenueBridgeStep[] }[] | PERIODS |
| defaultPeriod | number | 1 |
| height | number | 280 |
| formatValue | (value: number) => string | FORMAT |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "What moved revenue"
- subtitlestringDefault: "From opening to closing MRR. Every change accounted for."
- periods
Each period provides an opening balance and signed movements. Closing is calculated.
{ label: string; start: number; steps: RevenueBridgeStep[] }[]Default: PERIODS - defaultPeriodnumberDefault: 1
- heightnumberDefault: 280
- formatValue(value: number) => stringDefault: FORMAT
Revenue Bridge Chart FAQ
- Do I provide the closing balance?
- No. Supply an opening balance and signed steps; closing is calculated as opening plus all steps. Negative intermediate or closing balances are supported. A period containing nonfinite amounts or a nonfinite calculated closing balance is omitted.
- How are units and growth displayed?
- The default formatter uses compact USD values. Supply formatValue for other currencies or exact precision. Percentage change divides net change by the absolute opening balance; a zero opening balance shows Net change without a percentage.
