Waterfall

Overview

The waterfall insight type is used to create waterfall charts, which visualize incremental changes in value across a series of categories or time. Waterfall insights are ideal for financial analysis and showing sequential positive or negative changes affecting an initial value.

You can customize colors, connectors, and base values to represent your data effectively.

Common Uses

• Financial Analysis: Visualizing profit and loss over time or across categories.
• Incremental Changes: Showing how individual positive or negative changes affect a starting value.
• Part-to-Whole Visualization: Highlighting how parts contribute to a cumulative total.

Check out the Attributes for the full set of configuration options

Examples

Common Configurations

Simple Waterfall InsightWaterfall Insight with Custom ColorsFinancial Waterfall Insight with Connectors

sources:
  - name: waterfall-data-source
    type: duckdb
    database: target/seeds/waterfall_data.duckdb
    seeds:
      - table_name: model
        args:
          - echo
          - |
            idx,label,value
            0,Starting,1000
            1,Increase A,200
            2,Decrease B,-150
            3,Increase C,300
            4,Ending,1350

models:
  - name: waterfall-data
    source: ${ref(waterfall-data-source)}
    sql: select * from model
insights:
  - name: Simple Waterfall Insight
    props:
      type: waterfall
      x: ?{${ref(waterfall-data).label}}
      y: ?{${ref(waterfall-data).value}}
      measure: ["initial", "relative", "relative", "relative", "total"]
    interactions:
      - sort: ?{${ref(waterfall-data).idx} asc}


charts:
  - name: Simple Waterfall Chart
    insights:
      - ${ref(Simple Waterfall Insight)}
    layout:
      title:
        text: Simple Waterfall Plot<br><sub>Sequential Changes in Value</sub>

sources:
  - name: waterfall-data-colors-source
    type: duckdb
    database: target/seeds/waterfall_data_colors.duckdb
    seeds:
      - table_name: model
        args:
          - echo
          - |
            idx,label,value,color
            0,Starting,1000,#1f77b4
            1,Increase A,200,#2ca02c
            2,Decrease B,-150,#d62728
            3,Increase C,300,#ff7f0e
            4,Ending,1350,#9467bd

models:
  - name: waterfall-data-colors
    source: ${ref(waterfall-data-colors-source)}
    sql: select * from model
insights:
  - name: Waterfall Insight with Custom Colors
    props:
      type: waterfall
      x: ?{${ref(waterfall-data-colors).label}}
      y: ?{${ref(waterfall-data-colors).value}}
      measure: ["initial", "relative", "relative", "relative", "total"]
      increasing:
        marker:
          color: 'orange'
      decreasing:
        marker:
          color: 'purple'
      totals:
        marker:
          color: 'grey'
          line:
            color: 'orange'
            width: 4
    interactions:
      - sort: ?{${ref(waterfall-data-colors).idx} asc}


charts:
  - name: Waterfall Chart with Custom Colors
    insights:
      - ${ref(Waterfall Insight with Custom Colors)}
    layout:
      title:
        text: Waterfall Plot with Custom Colors<br><sub>Customized Coloring for Categories</sub>

sources:
  - name: waterfall-data-connectors-source
    type: duckdb
    database: target/seeds/waterfall_data_connectors.duckdb
    seeds:
      - table_name: model
        args:
          - echo
          - |
            idx,quarter,half,value,mode
            0,Q1,H1,1000,initial
            1,Q2,H1,200,relative
            2,Gross Profit,H1 Summary,0,total
            3,Q3,H2,-150,relative
            4,Q4,H2,300,relative
            5,Gross Profit,FY2024,0,total

models:
  - name: waterfall-data-connectors
    source: ${ref(waterfall-data-connectors-source)}
    sql: select * from model
insights:
  - name: Financial Waterfall Insight
    props:
      type: waterfall
      x:
        - ?{${ref(waterfall-data-connectors).half}}
        - ?{${ref(waterfall-data-connectors).quarter}}
      y: ?{${ref(waterfall-data-connectors).value}}
      measure: ?{${ref(waterfall-data-connectors).mode}}
      hovertemplate: "%{x}: %{y:$.2f}"
      texttemplate: "%{delta:$.2f}"
      textposition: "outside"
      connector:
        line:
          color: "orange"
          width: 5
    interactions:
      - sort: ?{${ref(waterfall-data-connectors).idx} asc}


charts:
  - name: Financial Waterfall Chart
    insights:
      - ${ref(Financial Waterfall Insight)}
    layout:
      title:
        text: Financial Waterfall
      margin:
        b: 50
        t: 60
      yaxis:
        range: [0, 1600]
        tickprefix: '$'
        title:
          text: "Millions ($)"