Waterfall Chart
A Waterfall Chart (also known as a Flying Bricks Chart or Mario Chart) is a visualization used to show the cumulative effect of sequentially introduced positive and negative values. It illustrates how an initial value is incrementally increased or decreased by intermediate values before arriving at a final total.
Waterfall charts are especially effective for highlighting contributions to change over time or across categories (e.g., revenue, expenses, profit breakdowns).
Best Situations to Use
Use a Waterfall chart when:
Showing incremental changes that build up to a final result.
Explaining how different factors contribute to an overall outcome.
Visualizing gains and losses in financial or operational data.
Examples:
Tracking yearly profit growth from revenue and expenses.
Showing how monthly sales targets are met through incremental achievements.
Analyzing budget vs. actual cost breakdowns.
Variations
Waterfall charts can be styled with different Base Types:
Plain
Gradient 1
Gradient 2
Gradient 3
Each base type provides a different visual effect for distinguishing positive, negative, and total values.
Properties
General
Component Name – Auto-generated unique identifier.
Position (Left, Top) – Placement on the canvas.
Height / Width – Define chart dimensions.
Initial Visibility – Show/hide chart on load.
Max Button – Enable maximize option.
Color From Drill – Inherit colors dynamically from drill-down.
Base Type – Choose base (Plain, Gradient 1–3).
Positive Color – Define color for positive (growth) values.
Negative Color – Define color for negative (loss) values.
Total Color – Define color for total (final) value.
Net Column Name – Identify dataset field containing calculated net values.
Bar Size – Adjust column width and spacing.
Tooltip
Supported options: None, Default.
Customize background, opacity, border color, font size, and box width.
Set decimal precision for values.
Enable highlighter mode to emphasize hovered columns.
Background & Styling
Gradient rotation, opacity, and custom colors.
Borders (color, width, radius).
Shadows with configurable color and transparency.
Title & Subtitle
Show/hide title and subtitle.
Customize text (color, size, style, weight, family, alignment, decoration).
Option to show dataset description dynamically.
Axes
X-Axis
Show/hide axis line.
Customize label fonts (color, size, style, weight, rotation).
Tilt labels for readability.
Add tick marks, markers, and dataset descriptions.
Y-Axis
Show/hide axis line.
Configure label fonts (color, size, style, weight).
Add axis descriptions and dataset labels.
Legend
Show/hide chart legend.
Customize legend font (color, size, style, weight, decoration).
Option to hide legend on load.
Formatter
Units (%, $, count).
Decimal precision.
Currency formatting.
Number formatting (Indian or International).
Value positioning (Prefix/Suffix).
Axis Setup
Auto Axis Setup – Automatically scale axis values.
Base Zero – Ensure axis starts from zero.
Min/Max Values – Define custom ranges.
Add Marker Lines (horizontal, vertical, or zero).
Customize marker colors and opacity.
Export Options
Enable context menu for exporting.
Supported formats: Excel, CSV, JPEG, PNG, PPT, PDF, Print.
Customize export heading, subheading, and file name.
Define global export type (Screenshot or Tabular).
Example Use Cases
Finance: Break down revenue and expense categories to show net profit.
Operations: Track incremental contributions to total efficiency.
Sales: Show how deals add up to monthly/quarterly targets.
HR: Analyze attrition impact on workforce headcount over time.
Sample Data Setup:
Category Field: Year (or time period).
Series Field: Expense or Revenue (numeric values).
⚠️ Note:
Category fields can be string, numeric, or date types.
Series fields must be numeric.