7. Creating Waterfall Charts#

Waterfall charts are a type of data visualization used to display the cumulative effect of sequentially introduced positive and negative values on a starting figure. Each bar in the chart represents a change (either an increase or decrease) from the previous total, with the starting value displayed as the initial bar and the final total shown as the last bar. Intermediate bars are typically color-coded to distinguish between gains and losses, while the cumulative total progresses step-by-step. This makes waterfall charts particularly effective for explaining how individual components contribute to a whole, such as tracking changes in financial performance, inventory levels, or budget breakdowns.

Waterfall charts are especially useful in scenarios where the focus is on understanding the composition of a total or analyzing step-by-step changes. For example, in financial analysis, they can be used to illustrate how revenues, costs, and other factors contribute to a company’s net profit. Similarly, they can be applied to project management to track budget adjustments over time or to supply chain analysis to account for inventory fluctuations. Their visual simplicity and clarity make them a valuable tool for presentations, as they can effectively communicate complex processes in a straightforward manner.

However, waterfall charts should be avoided when dealing with large datasets or highly granular data, as too many intermediate steps can make the chart cluttered and difficult to interpret. Additionally, they are not ideal for representing data with complex relationships or non-linear changes, as the sequential structure assumes a clear, additive progression. When exact numerical comparisons are critical, alternative charts like line or bar graphs might be more suitable. Waterfall charts work best when the goal is to visually explain cumulative changes and their contributions in a clear and intuitive way.

How to do it#

  1. Import the plotly.graph_objects submodule as go

import plotly.graph_objects as go

  1. Create a minimal waterfall chart using the function Waterfall from the go module.

fig = go.Figure(go.Waterfall(x = ["Sales", "Consulting", "Purchases", "Other expenses"],
                             y = [60, 80, -40, -20,],
                             text = ["+60", "+80", "-40", "-20"],
                             ))
fig.show()

  1. Customise the title and the dimensions of the Figure object by using the method update_layout and specifying title, width, height, and template

fig = go.Figure(go.Waterfall(x = ["Sales", "Consulting", "Purchases", "Other expenses"],
                             y = [60, 80, -40, -20,],
                             text = ["+60", "+80", "-40", "-20"],
                             ))

fig.update_layout(title = "Income and Expenses 2024",
                  width=1000,
                  height=500,
                  template='plotly_white'
                  )

fig.show()

  1. Each change in the Waterfall can be represented in three different ways: relative, total, or absolute. By default the values are considered as ‘relative’. However, it is possible to use ‘total’ to compute the sums. Also ‘absolute’ could be applied to reset the computed total or to declare an initial value where needed. This configuration is set via the argument measure

fig = go.Figure(go.Waterfall(x = ["Sales", "Consulting", "Net Revenue", "Purchases", "Other expenses", "Profit before tax"],
                             y = [60, 80, 0, -40, -20, 0],
                             text = ["+60", "+80", "", "-40", "-20", "Total"],
                             measure = ["relative", "relative", "total", "relative", "relative", "total"],
                             ))

fig.update_layout(title = "Profit and Losses 2024",
                  template='plotly_white',
                  width=1000,
                  height=500)

fig.show()

  1. Customise the location of the text that appears on each bar representing the changes by setting the argument textposition to one of the following values

  • “inside” positions text inside, next to the bar end (rotated and scaled if needed)

  • “outside” positions text outside, next to the bar end (scaled if needed), unless there is another bar stacked on this one, then the text gets pushed inside

  • “auto” tries to position text inside the bar, but if the bar is too small and no bar is stacked on this one the text is moved outside.

  • “none”, no text appears.

fig = go.Figure(go.Waterfall(x = ["Sales", "Consulting", "Net Revenue", "Purchases", "Other expenses", "Profit before tax"],
                             y = [60, 80, 0, -40, -20, 0],
                             text = ["+60", "+80", "", "-40", "-20", "Total"],
                             textposition = "outside",
                             measure = ["relative", "relative", "total", "relative", "relative", "total"],
                             ))

fig.update_layout(title = "Profit and Losses 2024",
                  template='plotly_white',
                  width=1000,
                  height=500)

fig.show()

  1. Customise the connectors between the bars by using the argument connector, which receives a dictionary (or a string value in simple cases) which define the aesthetics of the connectors. In this example, we chose thick dotted black lines

fig = go.Figure(go.Waterfall(x = ["Sales", "Consulting", "Net Revenue", "Purchases", "Other expenses", "Profit before tax"],
                             y = [60, 80, 0, -40, -20, 0],
                             text = ["+60", "+80", "", "-40", "-20", "Total"],
                             textposition = "outside",
                             measure = ["relative", "relative", "total", "relative", "relative", "total"],
                             connector = {"mode":"between", "line":{"width":4, "color":"rgb(0, 0, 0)", "dash":"dot"}}
                             ))

fig.update_layout(title = "Profit and Losses 2024",
                  template='plotly_white',
                  width=1000,
                  height=500)

fig.show()

  1. Change the orientation of the chart to horizontal by setting orientation="h" and exchanging the y and x values

fig = go.Figure(go.Waterfall(y = ["Sales", "Consulting", "Net Revenue", "Purchases", "Other expenses", "Profit before tax"],
                             x = [60, 80, 0, -40, -20, 0],
                             text = ["+60", "+80", "", "-40", "-20", "Total"],
                             textposition = "outside",
                             measure = ["relative", "relative", "total", "relative", "relative", "total"],
                             connector = {"mode":"between", "line":{"width":4, "color":"rgb(0, 0, 0)", "dash":"dot"}},
                             orientation = "h",
                             ))

fig.update_layout(title = "Profit and Losses 2024",
                  template='plotly_white',
                  width=800,
                  height=800)

fig.show()