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
0.4(0.25 - 2.5)
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
0.4(0.25 - 2.5)
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
0.4(0.25 - 2.5)
Calculation Table
Click on category headers to toggle groups, or individual rows to exclude items
Data: variance_data
Example 3b: Sales Variance with Single-Select Choice
This example demonstrates the difference between choices and filters:
Region (choice): Single-select dropdown - pick exactly ONE region
Filters allow multi-select, but choices restrict to exactly one selection
Use choices when the user must select exactly one option, such as when comparing data that only makes sense for a single dimension at a time.
Example 3b: Variance Analysis with Single-Select Choice
This example demonstrates the difference between choices and filters:
- **Region (choice)**: Single-select dropdown - pick exactly ONE region at a time
Use choices when the user must select exactly one option.
Filters
Plot Attributes
0.4(0.25 - 2.5)
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
0.4(0.25 - 2.5)
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
0.4(0.25 - 2.5)
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
0.4(0.25 - 2.5)
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-axis
color_cols: Column(s) for grouping items by category
value_col: Column containing numeric values
show_table: Toggle calculation table display
show_totals: Add a total bar at the end (toggleable from table)