Waterfall Chart

• Overview
• Modules
• Quick Start
• General Settings
• Special Settings
  • Data
  • Multiple Series
  • Totals as Absolute
  • Appearance
    • Columns
    • Connectors
    • Dropped Connectors
  • Point Size
  • Labels and Tooltips
    • Tokens
    • Formatting Functions
  • Legend

Overview

A waterfall chart is a data visualization that shows how an initial value is affected by a series of intermediate positive or negative values. This type is otherwise known as a cascade chart, bridge chart, flying bricks chart, or Mario chart.

As a rule, intermediate values are visualized as floating columns, while the initial and the final values look like whole columns. The elements are usually connected with lines.

This article explains how to create a basic Waterfall chart as well as configure settings that are specific to the type. You can also see the table below to get a brief overview of the Waterfall chart's characteristics:

Modules

The Waterfall chart requires adding the Core and Waterfall modules:

<script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-core.min.js"></script>

<script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-waterfall.min.js"></script>

Learn more: Modules

Quick Start

To create a Waterfall chart, use the anychart.waterfall() chart constructor. If you pass the data to this chart constructor, it creates a Waterfall series.

To create a Waterfall series explicitly, call the waterfall() method.

The following sample demonstrates how a basic Waterfall chart is created:

// create data   
var data = [
  {x: "Start", value:  23},
  {x: "Jan",   value:  22},
  {x: "Feb",   value: -46},
  {x: "Mar",   value: -91},
  {x: "Apr",   value:  37},
  {x: "May",   value: -21},
  {x: "Jun",   value:  53},
  {x: "Jul",   value:  31},
  {x: "Aug",   value: -15},
  {x: "Sep",   value:  42},
  {x: "Oct",   value:  53},
  {x: "Nov",   value: -15},
  {x: "Dec",   value:  51},
  {x: "End", isTotal: true}
];

// create a waterfall chart
chart = anychart.waterfall();

// create a series and set the data
var series = chart.waterfall(data);

// set the container id
chart.container("container");

// initiate drawing the chart
chart.draw();

General Settings

In AnyChart there are many settings that are configured in the same way for all chart types, including the Waterfall chart (for example, legend and interactivity settings).

Read the overview of general settings: General Settings.

Special Settings

Data

Data for a Waterfall chart can be passed to the chart constructor anychart.waterfall() or to the data() method.

Use the following data fields:

• x to set categories
• value to set values
• isTotal to show a total value
• drawConnector to force chart to hide the connector

Note: It is possible to add custom fields to your data - see the Labels and Tooltips section of this article.

The isTotal field is boolean, used optionally for showing/hiding a total value. By default, a total value is shown in a point if its value is not specified, and not shown if the value is specified.

The value field can be interpreted in different ways, depending on the data mode, which is set by using the dataMode() method with either "diff" or "absolute" as a parameter - see anychart.enums.WaterfallDataMode.

The default data mode is difference. It means that the value data field is interpreted as the difference between the current point and the previous one, the absolute value being calculated automatically.

In the absolute data mode, the value field is interpreted as the absolute value of a point, and the difference is calculated automatically.

The sample below shows how to set the data mode:

// create data   
var data = [
  {x: "Start", value:  23},
  {x: "Jan",   value:  22},
  {x: "Feb",   value: -46},
  {x: "Mar",   value: -91},
  {x: "Apr",   value:  37},
  {x: "May",   value: -21},
  {x: "Jun",   value:  53},
  {x: "Jul",   value:  31},
  {x: "Aug",   value: -15},
  {x: "Sep",   value:  42},
  {x: "Oct",   value:  53},
  {x: "Nov",   value: -15},
  {x: "Dec",   value:  51},
  {x: "End", isTotal: true}
];

// create and configure the first waterfall chart
var chart1 = anychart.waterfall(data);
// set the data mode
chart1.dataMode("diff");

// create and configure the second waterfall chart
var chart2 = anychart.waterfall(data);
// set the data mode
chart2.dataMode("absolute");

Multiple Series

The Waterfall chart supports multiple series, and this sample shows how they are visualized:

// create a data set
var data = anychart.data.set([
  ["Start", 23,  30,  21],
  ["Jan",   22,  22,  54],
  ["Feb",  -46,  45, -32],
  ["Mar",  -91, -30,  -28],
  ["Apr",   37, -27,  36],
  ["May",  -24,  62, -48],
  ["Jun",   55,  40, -29],
  ["Jul",   31,  33,  41],
  ["Aug",  -25, -46,  36],
  ["Sep",   42,  23,  22],
  ["Oct",   67, -44, -40],
  ["Nov",  -24, -31,  37],
  ["Dec",   51,  28,  25],
  ["End", {isTotal: true}, {isTotal: true}, {isTotal: true}],
]);

// map the data
var seriesData_1 = data.mapAs({x: 0, value: 1});
var seriesData_2 = data.mapAs({x: 0, value: 2});
var seriesData_3 = data.mapAs({x: 0, value: 3});

// create a waterfall chart
chart = anychart.waterfall();

// create the first series and set the data
var series1 = chart.waterfall(seriesData_1);

// create the second series and set the data
var series2 = chart.waterfall(seriesData_2);

// create the third series and set the data
var series3 = chart.waterfall(seriesData_3);

Totals as Absolute

Totals are calculated automatically depending on the mode, if you want to force chart to draw another value you can use the drawTotalsAsAbsolute() method like that:

// Set totals drawing mode.
chart.drawTotalsAsAbsolute(true);

In the sample below you can see that the data is the following:

chart = anychart.waterfall([
  {x: 'Net Sales', value: 100 },
  {x: 'Cost of Sales', value: -50 },
  {x: 'Extraordinary Gain', value: 100},
  {x: 'Planed total', value: 100, isTotal: true },
]);

So the calculated total should be 150 but the value provided in the data is 100 and drawTotalsAsAbsolute() forced the last total to be displayed as 100:

Appearance

Columns

The appearance settings of Waterfall columns can be configured in three states: normal, hover, and selected. Use the normal(), hovered(), and selected() methods.

Combine them with the following methods to adjust columns indicating total values:

• fill() to set the fill
• hatchFill() to set the hatch fill
• stroke() to set the stroke

To adjust falling columns, use:

• fallingFill()
• fallingHatchFill()
• fallingStroke()

To adjust rising columns, use:

• risingFill()
• risingHatchFill()
• risingStroke()

Also, you can use some other methods from anychart.core.StateSettings.

In the following sample, there is a Waterfall chart with appearance settings configured:

// configure the visual settings of the series
series.normal().fill("#ff6666", 0.3);
series.normal().hatchFill("forward-diagonal", "#ff6666", 0.5, 10);
series.normal().stroke("#ff6666");
series.hovered().fill("#ff6666", 0.1);
series.hovered().hatchFill("forward-diagonal", "#ff6666", 0.5, 10);
series.hovered().stroke("#ff6666", 2);
series.selected().fill("#ff6666", 0.5);
series.selected().hatchFill("forward-diagonal", "#ff6666", 0.5, 10);
series.selected().stroke("#ff6666", 4);

series.normal().fallingFill("#00cc99", 0.3);
series.normal().fallingStroke("#00cc99", 1, "10 5", "round");
series.hovered().fallingFill("#00cc99", 0.1);
series.hovered().fallingStroke("#00cc99", 2, "10 5", "round");
series.selected().fallingFill("#00cc99", 0.5);
series.selected().fallingStroke("#00cc99", 4, "10 5", "round");

series.normal().risingFill("#0066cc", 0.3);
series.normal().risingStroke("#0066cc");
series.hovered().risingFill("#0066cc", 0.1);
series.hovered().risingStroke("#0066cc", 2);
series.selected().risingFill("#0066cc", 0.5);
series.selected().risingStroke("#0066cc", 4);

Connectors

A connector is a line connecting two columns of a Waterfall chart. To configure the stroke of connectors, use the connectorStroke() method:

// configure connectors
chart.connectorStroke("#ff6666", 2, "2 2", "round");

Dropped Connectors

In some cases you may want to omit drawing a connector from a point to the next point, to do so you need to use drawConnector field in the data set like this:

var data = [
  {x: "2022", value:  23},
  {x: "Q1",   value:  -12},
  {x: "Q2",   value: 16},
  {x: "Q3",   value:  9},
  {x: "Q4",   value:  7},
  {x: "2023", isTotal: true, drawConnector: false},
  {x: "Total", isTotal: true},
];

Here is a sample, notice there is no connector between two last bars: 2023 and Total:

Point Size

This chart type allows you to set the size of its points. Read more in the Point Size article.

Labels and Tooltips

Labels are text or image elements that can be placed anywhere on any chart (you can enable them on a whole series or in a single point). For text labels, font settings and text formatters are available.

A Tooltip is a text box displayed when a point on a chart is hovered over. There is a number of visual and other settings available: for example, you can edit the text by using font settings and text formatters, change the style of background, adjust the position of a tooltip, and so on.

Tokens

To change the text of labels, combine the labels() and format() methods with tokens.

To configure tooltips, do the same with the tooltip() and format() methods. It is also possible to change the titles of tooltips: use titleFormat().

Besides tokens that work with all chart types, there are two tokens that are specific to the Waterfall: {%diff} and {%absolute}. The first one returns the difference between points and the second one returns the absolute value of a point.

Also, you can add a custom field to your data and use a custom token corresponding to it.

By default, labels show the difference, and in the following sample the {%absolute} token is used to show absolute values. The text of tooltips, including their titles, is modified too, and a custom token is used:

// create data   
var data = [
  {x: "Start", value:  23, custom_field: "info 1"},
  {x: "Jan",   value:  22, custom_field: "info 2"},
  {x: "Feb",   value: -46, custom_field: "info 3"},
  {x: "Mar",   value: -91, custom_field: "info 4"},
  {x: "Apr",   value:  37, custom_field: "info 5"},
  {x: "May",   value: -21, custom_field: "info 6"},
  {x: "Jun",   value:  53, custom_field: "info 7"},
  {x: "Jul",   value:  31, custom_field: "info 8"},
  {x: "Aug",   value: -15, custom_field: "info 9"},
  {x: "Sep",   value:  42, custom_field: "info 10"},
  {x: "Oct",   value:  53, custom_field: "info 11"},
  {x: "Nov",   value: -15, custom_field: "info 12"},
  {x: "Dec",   value:  51, custom_field: "info 13"},
  {x: "End", isTotal: true, custom_field: "info 14"}
];

// create a waterfall chart
var chart = anychart.waterfall();

// create a series and set the data
var series = chart.waterfall(data);

// configure labels
chart.labels().format("{%absolute}");

// configure tooltips
chart.tooltip().titleFormat("Absolute | Difference");
chart.tooltip().format("{%absolute}\n{%diff}\n\n{%custom_field}");

Formatting Functions

To configure labels and tooltips, you can use formatting functions and the following fields (in addition to the default ones):

• diff
• absolute
• isTotal

The isTotal field allows to find out whether a column indicates a total value or not.

You can also add a custom field to your data and refer to it by using the getData() method.

In the sample below all labels show absolute values, and labels of columns indicating total values are colored. Tooltips of columns indicating total values are modified too, and a custom field is used:

// create data   
var data = [
  {x: "Start", value:  23, custom_field: "info 1"},
  {x: "Jan",   value:  22, custom_field: "info 2"},
  {x: "Feb",   value: -46, custom_field: "info 3"},
  {x: "Mar",   value: -91, custom_field: "info 4"},
  {x: "Apr",   value:  37, custom_field: "info 5"},
  {x: "May",   value: -21, custom_field: "info 6"},
  {x: "Jun",   value:  53, custom_field: "info 7"},
  {x: "Jul",   value:  31, custom_field: "info 8"},
  {x: "Aug",   value: -15, custom_field: "info 9"},
  {x: "Sep",   value:  42, custom_field: "info 10"},
  {x: "Oct",   value:  53, custom_field: "info 11"},
  {x: "Nov",   value: -15, custom_field: "info 12"},
  {x: "Dec",   value:  51, custom_field: "info 13"},
  {x: "End", isTotal: true, custom_field: "info 14"}
];

// create a waterfall chart
var chart = anychart.waterfall();

// create a series and set the data
var series = chart.waterfall(data);

// enable HTML for labels
chart.labels().useHtml(true);

// configure labels
chart.labels().format(function() {
    if (this.isTotal)
        return "<span style='color:#dd2c00;font-weight:bold'>" +
               this.absolute + "</span>";
    return this.absolute;
});

// configure tooltips
chart.tooltip().titleFormat(function() {
    if (this.isTotal)
        return "TOTAL (" + this.getData("custom_field") + ")";
    return this.x + " (" + this.getData("custom_field") + ")";
});

Legend

The default legend of the Waterfall chart shows increasing, decreasing, and total columns. If you work with a multiple-series chart and want to show series instead, change the source of legend items by combining the legend() method with itemsSourceMode() and use "default" as a parameter:

// add hatch fills
series1.hatchFill("percent05", "white", 1, 9);
series1.fallingHatchFill("percent05", "white", 1, 9);
series1.risingHatchFill("percent05", "white", 1, 9);

series2.hatchFill("dashed-backward-diagonal", "white", 1, 9);
series2.fallingHatchFill("dashed-backward-diagonal", "white", 1, 9);
series2.risingHatchFill("dashed-backward-diagonal", "white", 1, 9);

series3.hatchFill("forward-diagonal", "white", 1, 6);
series3.fallingHatchFill("forward-diagonal", "white", 1, 6);
series3.risingHatchFill("forward-diagonal", "white", 1, 6);

// configure the legend
chart.legend().itemsSourceMode("default");