See here for the example code that generated this page
Waterfall Chart Examples
This page demonstrates the interactive Waterfall chart type in JSPlots.
- Automatic cumulative sum calculation: Enter category and value data, waterfall handles the rest
- Side-by-side calculation table: See exact values and running totals
- Click-to-remove interaction: Click on bars or table rows to temporarily exclude from calculation
- Reset functionality: Restore all removed segments with one click
- Color coding: Green for positive values, red for negative, black for totals. Or switch to category-based coloring
- Filtering: Switch between different datasets using single-select dropdowns
Example 1: Profit & Loss Statement
A classic use case for waterfall charts: showing how revenue flows through various expenses to net income.
Features demonstrated:
- Positive values (Revenue, Gross Profit) in green
- Negative values (Costs, Expenses) in red
- Running total displayed in the table
- Click on any bar or table row to exclude from calculation
- Reset button to restore all segments
Profit & Loss Statement
Click on bars or table rows to exclude items from the calculation. Use Reset to restore.
Filters
Plot Attributes
Calculation Table
Click on category headers to toggle groups, or individual rows to exclude items
Data: pnl_data
Example 2: Cash Flow Bridge
Show how cash position changes from opening to closing balance through operating, investing, and financing activities.
This example demonstrates:
- Mix of positive and negative cash flows
- Total bar showing final cash position
- Interactive removal to see "what-if" scenarios
Cash Flow Bridge - Q1 2024
Waterfall showing cash flow changes. Total bar shows ending cash position.
Plot Attributes
Calculation Table
Click on category headers to toggle groups, or individual rows to exclude items
Data: cash_data
Example 3: Sales Variance Analysis with Filters
Analyze sales variance by breaking down the impact of price, volume, and mix changes.
This example includes:
- Multiple regions selectable via filters
- Variance analysis showing positive and negative impacts
- Side-by-side table for detailed calculation review
- Click-to-remove to isolate specific variance drivers
Try this: Select different regions to see how variance components differ across markets!
Sales Variance Analysis by Region
Use the region filter to switch between markets. Click on variance components to see impact on actual sales.
Filters
Plot Attributes
Calculation Table
Click on category headers to toggle groups, or individual rows to exclude items
Data: variance_data
Example 4: Budget vs Actuals Comparison
Compare budgeted vs actual expenses across departments with multiple filters.
Features:
- Department filter to focus on specific areas
- Year filter for historical comparison
- Both positive and negative variances
- Table shows running variance total
Budget vs Actuals - Department Variance
Filter by department and year to see specific variances. Red indicates over-budget, green under-budget.
Filters
Plot Attributes
Calculation Table
Click on category headers to toggle groups, or individual rows to exclude items
Data: budget_data
Example 5: Waterfall Chart Without Table
Sometimes you just want the visual without the detailed calculations.
This example shows a waterfall chart with the table disabled (show_table=false).
Simple Waterfall - Chart Only
This waterfall chart has show_table=false, so only the visualization is displayed.
Plot Attributes
Data: simple_data
Example 6: Multiple Color Column Options
This example demonstrates the ability to switch between different category columns.
The same data can be viewed through different lenses - by financial category OR by department.
Features:
- Color Column dropdown to switch between category perspectives
- Same underlying data, different groupings
- Useful for multi-dimensional analysis
Multi-Perspective Waterfall Analysis
Use the Color Column dropdown to switch between financial and departmental views of the same data.
Plot Attributes
Calculation Table
Click on category headers to toggle groups, or individual rows to exclude items
Data: multi_color_data
Summary
The Waterfall chart type provides:
- Automatic calculation: Just provide categories and values, cumulative sums are calculated automatically
- Side-by-side table: Optional calculation table showing each step and running total, grouped by category
- Interactive removal: Click on bars or table rows to temporarily exclude from calculation
- Category grouping: Toggle entire categories on/off using category checkboxes in the table
- Reset functionality: Restore all removed segments with the reset button
- Color coding:
- Value mode: Green for positive values, Red for negative values
- Category mode: Different color for each category from the color palette
- Total bar: Always black regardless of color mode
- Filtering: Single-select filters to switch between datasets
- Customization:
item_col: Column containing item labels for the x-axiscolor_cols: Column(s) for grouping items by categoryvalue_col: Column containing numeric valuesshow_table: Toggle calculation table displayshow_totals: Add a total bar at the end (toggleable from table)
Use Cases
- Financial analysis (P&L, cash flow, variance analysis)
- Budget vs actual comparisons
- Sequential process flows showing cumulative impact
- Inventory or population change analysis
- Revenue bridge analysis
- Cost breakdown and attribution
Tips
- Click on any bar or table row to see the impact of removing that component
- Click category checkboxes to toggle entire groups on/off
- Use the Color By dropdown to switch between value-based and category-based coloring
- Use the Reset button to quickly restore all segments
- Combine with filters to compare waterfalls across different dimensions
- Set
show_totals=false when your last item is already a total
- The total bar can be toggled on/off by clicking its row in the table
This page was created using JSPlots.jl.