Waterfall Chart

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 also 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:

API
Classanychart.charts.Waterfall
DATA
Data Fieldsx, value, isTotal
Multiple SeriesYES
OPTIONS
StackedMultiple Series
VerticalN/A
3DN/A
Error BarsN/A
SUPPORTED CHART PLOTS
PolarN/A
RadarN/A
ScatterN/A
StockN/A
RELATED TYPES
Column
Range Column
Stacked
SEE ALSO
Chartopedia: Waterfall Chart
General Settings

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();

JsFiddle Playground

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

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.

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");

JsFiddle Playground

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);

JsFiddle Playground

Appearance

You can set the stroke, fill, and hatch fill of falling and rising columns. Use the following methods:

To configure these settings on hover, use:

To configure these settings on select, use:

You can also set fill, hatch fill, and stroke of columns indicating total values:

Learn more: Appearance Settings section.

In the followoing sample, there is a Waterfall chart with some of the appearance settings configured:

// configure visual settings
series.fill("#ff6666", 0.3);
series.hatchFill("forwardDiagonal", "#ff6666", 0.5, 10);
series.stroke("#ff6666");
series.hoverFill("#ff6666", 0.1);
series.hoverStroke("#ff6666", 2);
series.selectFill("#ff6666", 0.5);
series.selectStroke("#ff6666", 4);

series.risingFill("#0066cc", 0.3);
series.risingStroke("#0066cc");
series.hoverRisingFill("#0066cc", 0.1);
series.hoverRisingStroke("#0066cc", 2);
series.selectRisingFill("#0066cc", 0.5);
series.selectRisingStroke("#0066cc", 4);

series.fallingFill("#00cc99", 0.3);
series.fallingStroke("#00cc99", 1, "10 5", "round");
series.hoverFallingFill("#00cc99", 0.1);
series.hoverFallingStroke("#00cc99", 2, "10 5", "round");
series.selectFallingFill("#00cc99", 0.5);
series.selectFallingStroke("#00cc99", 4, "10 5", "round");

JsFiddle Playground

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");

JsFiddle Playground

Point Size

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

Labels

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.

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

In addition to tokens that work universally, you can use two tokens that work only with the Waterfall chart: {%Diff} and {%Absolute}. The first one returns the difference between points and the second one returns the absolute value of a point.

By default, labels show the difference, and in this sample the {%Absolute} token is used to show absolute values:

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

JsFiddle Playground

You can also configure labels with the help of formatting functions and the following fields (in addition to the default ones): diff, absolute, isTotal. The last field allows to find out whether a column indicates a total value or not.

For example, in the sample below labels show absolute values, and the labels of columns indicating total values are colored:

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

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

JsFiddle Playground

Tooltips

A Tooltip is a text box displayed when a point on a chart is hovered. 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.

To change the text of tooltips, combine the tooltip() and format() methods with tokens. It is also possible to change the titles of tooltips: call titleFormat().

In addition to tokens that work universally, you can use two tokens that work only with the Waterfall chart: {%Diff} and {%Absolute}. The first one returns the difference between points and the second one returns the absolute value of a point.

In the following sample, these tokens are used to change the text of tooltips, including the titles:

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

JsFiddle Playground

You can also configure tooltips with the help of formatting functions and the following fields (in addition to the default ones): diff, absolute, isTotal. The last field allows to find out whether a column shows a total value or not.

The function in the sample below modifies the tooltips of columns indicating total values:

// configure tooltips
chart.tooltip().titleFormat(function(){
    if (this.isTotal) return "Total";
    return this.x;
});

JsFiddle Playground

Legend

The default legend of the Waterfall chart shows increasing, decreasing, and total columns. If you work with a multi-series chart and want to show series instead, combine 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("dashedBackwardDiagonal", "white", 1, 9);
series2.fallingHatchFill("dashedBackwardDiagonal", "white", 1, 9);
series2.risingHatchFill("dashedBackwardDiagonal", "white", 1, 9);

series3.hatchFill("forwardDiagonal", "white", 1, 6);
series3.fallingHatchFill("forwardDiagonal", "white", 1, 6);
series3.risingHatchFill("forwardDiagonal", "white", 1, 6);

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

JsFiddle Playground