Charts · Gutenberg
Waterfall Chart block for WordPress
Financial waterfall (bridge) chart showing cumulative effect of sequential positive and negative values. Perfect for P&L analysis, budget breakdowns, and cash flow visualization.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Financial waterfall (bridge) chart showing cumulative effect of sequential positive and negative values. Perfect for P&L analysis, budget breakdowns, and cash flow visualization.
Inspector panels on this block: Chart Data, Labels & Format, Appearance. Those titles come from index.js, not from a shared template.
Behavior controls: “Type” options: Starting value, Increase (+), Decrease (−), Total / Net.
Where to find it
Gutenberg inserter → Charts → search “Waterfall Chart” (block name `blockenberg/waterfall-chart` in block.json). Style it in the sidebar after insert.
How to use Waterfall Chart block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Waterfall Chart”, insert it. Category: Charts.
- Configure inspector controls that exist on this block. Open Chart Data. Set “Label”, “Value (negative = decrease)”, “Type”, “Chart title”.
- Check the published page. The view script reads HTML data attributes: data-opts, data-rendered. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Label | Text field in the inspector. |
| Value (negative = decrease) | Text field in the inspector. |
| Type | Select control; the chosen value is saved on the block. Options: Starting value; Increase (+); Decrease (−); Total / Net. |
| Chart title | Text field in the inspector. block.json default: Revenue Waterfall. Saved as `title`. |
| Show title | On/off toggle in the inspector. On by default. Saved as `showTitle`. |
| Value prefix | Text field in the inspector. block.json default: $. Saved as `valuePrefix`. |
| Value suffix | Text field in the inspector. Saved as `valueSuffix`. |
| Abbreviate large values (K, M, B) | On/off toggle in the inspector. On by default. Saved as `abbreviate`. |
| Chart height (px) | Numeric range control in the inspector. Range 200–700. block.json default: 380. Saved as `height`. |
| Bar max thickness (px) | Numeric range control in the inspector. Range 20–100. block.json default: 48. Saved as `barThickness`. |
| Bar border radius (px) | Numeric range control in the inspector. Range 0–20. block.json default: 4. Saved as `borderRadius`. |
| Max width (px) | Numeric range control in the inspector. Range 400–1400. block.json default: 800. Saved as `maxWidth`. |
| Show connector lines | On/off toggle in the inspector. On by default. Saved as `showConnectors`. |
| Show data labels | On/off toggle in the inspector. On by default. Saved as `showDataLabels`. |
| Show grid lines | On/off toggle in the inspector. On by default. Saved as `showGrid`. |
| Show legend | On/off toggle in the inspector. On by default. Saved as `showLegend`. |
| Padding top | Numeric range control in the inspector. Range 0–120. block.json default: 0. Saved as `paddingTop`. |
| Padding bottom | Numeric range control in the inspector. Range 0–120. block.json default: 0. Saved as `paddingBottom`. |
| Label size | Numeric range control in the inspector. Range 8–18. block.json default: 12. Saved as `labelSize`. |
| Value size | Numeric range control in the inspector. Range 8–18. block.json default: 11. Saved as `valueSize`. |
| Colors — Background | Color control in the inspector. block.json default: #ffffff. Saved as `bgColor`. |
| Colors — Title | Color control in the inspector. block.json default: #111827. Saved as `titleColor`. |
| Labels / axis | Color control in the inspector. block.json default: #6b7280. Saved as `labelColor`. |
| Grid lines | Color control in the inspector. block.json default: #e5e7eb. Saved as `gridColor`. |
| Connectors | Color control in the inspector. block.json default: #9ca3af. Saved as `connectorColor`. |
| Start bars | Color control in the inspector. block.json default: #6366f1. Saved as `startColor`. |
| Increase bars | Color control in the inspector. block.json default: #10b981. Saved as `increaseColor`. |
| Decrease bars | Color control in the inspector. block.json default: #ef4444. Saved as `decreaseColor`. |
| Total bars | Color control in the inspector. block.json default: #8b5cf6. Saved as `totalColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
- Charts are drawn with Chart.js in the browser from values saved on the block.
- Drawing happens on a canvas element after the page loads.
- JavaScript functions that perform the math: computeFloats.
When this is the right block
- Financial waterfall (bridge) chart showing cumulative effect of sequential positive and negative values. Perfect for P&L analysis, budget breakdowns, and cash flow visualization — that is the job of Waterfall Chart, not a generic content block.
- Use it when you need the editor control labeled “Label”, which exists on this block’s inspector.
- It matches pages about waterfall, bridge, chart.
- The math runs in the visitor’s browser after publish — no extra calculator plugin.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Waterfall Chart block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Waterfall Chart”. It sits under Charts. After insert, open Chart Data and set “Label”, “Value (negative = decrease)”, “Type”, “Chart title”.
Does Waterfall Chart need a server or extra plugin?
No. After Blockenberg is active, the view script runs in the browser with the values you saved on the block.
Is the Waterfall Chart Gutenberg block free?
Yes. Waterfall Chart ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Waterfall Chart to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Chart Data, Labels & Format, Appearance).
Related charts blocks
Bar Chart
Vertical or horizontal bar chart with multiple datasets using Chart.js (CDN). Supports stacked, border radius, and custom colors.
Mixed Chart
Combination bar + line chart with an optional dual Y-axis. Perfect for overlaying revenue (bar) with growth rate (line) or any two related metrics in the same canvas. Powered by Chart.js CDN.
Sankey Diagram
Flow diagram showing proportional transfers between stages. Great for budget allocation, user journeys, traffic sources, and energy/material flows.
Area Chart
Smooth filled area chart with multiple datasets, gradient fills, and animation using Chart.js (CDN). Great for showing trends over time.
Bubble Chart
Interactive bubble chart powered by Chart.js.
Creative Stats Waterfall
Staggered waterfall layout of large statistics with animated counters and accent colors.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Waterfall Chart from the Gutenberg inserter.