Create Waterfall chart

Everything you need to know to create the chart you want.

Overview

Waterfall charts break down how an initial value increases or decreases through a sequence of contributions, leading to a final result. They’re perfect for explaining “what changed” over time or between scenarios.

When to use it

• Reconciling financial statements (starting cash → adjustments → ending cash).

• Showing impact of drivers on a KPI (churn, upsell, expansion).

• Explaining project timelines (baseline → scope changes → final date).

Avoid waterfall charts if the order of contributions doesn’t matter or if you lack a clear starting and ending point.

Data requirements

• Ordered categories representing each step.

• Positive values increase the total; negative values decrease it.

Style options available

Group	Control	Input type	Options	Description
Colors	Color palette	palette	—	Palette applied to series; sets the default colours for the chart.
General → Waterfall	Margin between bars	number	—	Pixel gap between individual bars or columns.
General → Waterfall	Round bars, px	number	—	Radius applied to round off bar or column corners (in pixels).
General → Waterfall	Corners to round	select	end, all	Defines radius for rounding column or bar corners in pixels.
General → Waterfall	Border width	number	—	Thickness of the stroke around the element (bars, candles, gauges).
General → Waterfall	Connector line width	number	—	Thickness of the leader lines that link labels to data.
General → Waterfall	Connector line color	color	—	Colour of the leader lines connecting labels to slices or points.
General → Waterfall	Up color	color	—	Fill colour for increasing candlesticks or bars.
General → Waterfall	Show total column	boolean	—	Adds a final total column to the waterfall chart.
General → Waterfall	Name of total	text	—	Label text used for the total column in waterfall charts.
General → Data labels	Show data labels	boolean	—	Shows numeric labels directly on data points.
General → Data labels	Allow labels to overlap	boolean	—	Allows labels to render even if they collide instead of hiding them automatically.
General → Data labels	Font name	text	—	Font family used for titles, labels, or legend text.
General → Data labels	Font style	text	—	Font weight or style (e.g., bold, italic).
General → Data labels	Font size	number	—	Font size in pixels for the selected text element.
General → Data labels	Font color	color	—	Colour of the text shown for this element.
Axes → X Axis	Show X Axis	boolean	—	Shows or hides the X axis line, ticks, and labels.
Axes → X Axis	Base line width	number	—	Thickness of the axis baseline line in pixels.
Axes → X Axis	Grid line width	number	—	Thickness of gridlines in pixels.
Axes → X Axis	Base line color	color	—	Colour of the axis baseline line.
Axes → X Axis	Grid line color	color	—	Colour for gridlines drawn across the chart background.
Axes → X Axis	Grid line style	select	Solid, ShortDash, ShortDot, ShortDashDot, ShortDashDotDot, Dot, Dash, LongDash, DashDot, LongDashDot, LongDashDotDot	Line pattern used for gridlines (solid, dashed, dotted, etc.).
Axes → X Axis	Allow labels to overlap	boolean	—	Allows labels to render even if they collide instead of hiding them automatically.
Axes → X Axis	Show every n'th label	number	—	Skips labels so only every nth label is drawn.
Axes → X Axis	Rotation of labels	number	—	Rotation angle applied to axis or data labels in degrees.
Axes → X Axis	Opposite side	boolean	—	Positions the axis on the opposite side of the chart (top/right).
Axes → X Axis	Margin for title	number	—	Space between the axis title and the axis labels/ticks.
Axes → Y Axis	Show Y Axis	boolean	—	Shows or hides the Y axis line, ticks, and labels.
Axes → Y Axis	Base line width	number	—	Thickness of the axis baseline line in pixels.
Axes → Y Axis	Grid line width	number	—	Thickness of gridlines in pixels.
Axes → Y Axis	Base line color	color	—	Colour of the axis baseline line.
Axes → Y Axis	Grid line color	color	—	Colour for gridlines drawn across the chart background.
Axes → Y Axis	Grid line style	select	Solid, ShortDash, ShortDot, ShortDashDot, ShortDashDotDot, Dot, Dash, LongDash, DashDot, LongDashDot, LongDashDotDot	Line pattern used for gridlines (solid, dashed, dotted, etc.).
Axes → Y Axis	Tick width	number	—	Thickness of tick marks in pixels.
Axes → Y Axis	Tick length	number	—	Length of the tick marks in pixels.
Axes → Y Axis	Tick color	color	—	Colour of the axis tick marks.
Axes → Y Axis	Labels alignment	select	left, center, right	Horizontal alignment of axis labels relative to the tick mark.
Axes → Y Axis	X offset	number	—	Horizontal offset applied to axis labels.
Axes → Y Axis	Y offset	number	—	Vertical offset applied to axis labels.
Axes → Y Axis	Type	select	category, linear, logarithmic, datetime	Sets the vertical axis scale (category, numeric, logarithmic, or datetime).
Axes → Y Axis	Opposite side	boolean	—	Positions the axis on the opposite side of the chart (top/right).
Axes → Y Axis	Margin for title	number	—	Space between the axis title and the axis labels/ticks.
Axes → Common	Font name	text	—	Font family used for titles, labels, or legend text.
Axes → Common	Font style	text	—	Font weight or style (e.g., bold, italic).
Axes → Common	Font size	number	—	Font size in pixels for the selected text element.
Axes → Common	Font color	color	—	Colour of the text shown for this element.
Axes → Axes titles	Font name	text	—	Font family used for titles, labels, or legend text.
Axes → Axes titles	Font style	text	—	Font weight or style (e.g., bold, italic).
Axes → Axes titles	Font size	number	—	Font size in pixels for the selected text element.
Axes → Axes titles	Font color	color	—	Colour of the text shown for this element.
Axes → Axes titles	X Axis margin	number	—	Extra padding around the X axis labels for titles.
Axes → Axes titles	Y Axis margin	number	—	Extra padding around the Y axis labels for titles.
Legend → Main	Show legend	boolean	—	Shows or hides the legend box.
Legend → Main	Horizontal align	select	left, center, right	Horizontal alignment for the legend box (left, centre, right).
Legend → Main	Vertical align	select	top, middle, bottom	Vertical alignment for the legend box (top, middle, bottom).
Legend → Main	Layout	select	horizontal, vertical, proximate	Orientation of the legend items (horizontal row, vertical column, or proximate).
Legend → Additional	Margin for legend	number	—	Outer margin around the legend box.
Legend → Additional	Margin top for items	number	—	Top padding inside the legend between items.
Legend → Additional	Margin bottom for items	number	—	Bottom padding inside the legend between items.
Legend → Additional	Distance between items	number	—	Horizontal spacing between legend entries.
Legend → Style	Font name	text	—	Font family used for titles, labels, or legend text.
Legend → Style	Font style	text	—	Font weight or style (e.g., bold, italic).
Legend → Style	Font size	number	—	Font size in pixels for the selected text element.
Legend → Style	Font color	color	—	Colour of the text shown for this element.
Title → Chart title	Font name	text	—	Font family used for titles, labels, or legend text.
Title → Chart title	Font style	text	—	Font weight or style (e.g., bold, italic).
Title → Chart title	Font size	number	—	Font size in pixels for the selected text element.
Title → Chart title	Font color	color	—	Colour of the text shown for this element.
Title → Chart title	Margin bottom	number	—	Extra space below chart titles or subtitles in pixels.
Title → Chart subtitle	Font name	text	—	Font family used for titles, labels, or legend text.
Title → Chart subtitle	Font style	text	—	Font weight or style (e.g., bold, italic).
Title → Chart subtitle	Font size	number	—	Font size in pixels for the selected text element.
Title → Chart subtitle	Font color	color	—	Colour of the text shown for this element.

Have problems or want to improve this chart type?

Ping us via [email protected].