# Create Waterfall chart

### 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 <hello@chartplugin.com>.
