Waterfall

A waterfall chart is a form of data visualization that helps in understanding the cumulative effect of sequentially introduced positive or negative values. These intermediate values can either be time based or category based. The waterfall chart is also known as a flying bricks chart or Mario chart due to the apparent suspension of columns (bricks) in mid-air. Often in finance, it will be referred to as a bridge.

Sample Code

koolreport\d3\Waterfall::create([
    "title"=>"Revenue, cost and profit",
    "dataSource"=>[
        ["name"=>"Product Revenue","amount"=>420000],
        ["name"=>"Services Revenue","amount"=>210000],
        ["name"=>"Fixed Costs","amount"=>-170000],
        ["name"=>"Variable Costs","amount"=>-140000]
    ],
    "columns"=>[
        "name",
        "amount"=>[
            "prefix"=>"$"
        ]
    ],
    "yAxis"=>[
        "prefix"=>"$",
    ],
    "summary"=>[
        "Total Revenue"=>2,
        "Profit"=>"end"
    ],
]);

Properties #

Nametypedefaultdescription
titleTitle of waterfall chart
dataSourcemixedSet the datasource for chart, it accepts DataStore, Process, DataSource objects or simply array
columnsList of columns from datasource which will be used to draw. Waterfall needs two columns, first one is in string type containing category and second one is in number type containing value
yAxisContaining the format of tick number on yAxis
summaryDefine the extra summary bar on chart, by default there is summary column at the end with name Total

Format label #

You can format the number on the waterfall's bar. The format setting is inside the second column which hold values.

koolreport\d3\Waterfall::create([
    ...
    "columns"=>[
        "name",
        "amount"=>[
            "decials"=>2,
            "decPoint"=>".",
            "thousandSep"=>",",
            "prefix"=>"$",
            "suffix"=>"",
            "format"=>"function(number){
                return '$'.number;
            }"
        ]
    ],
    ...
]);
Nametypedefaultdescription
decimalsnumber0The number of 0 after decimal point
decPointstring"."The decimal point character
thousandSepstring","The character of thousand separator
prefixstringThe prefix of number
suffixstringThe suffix of number
formatstringA custom javascript function to format string. The function will receipt a number as parameter and return the formatted string

Format YAxis #

You can format the number appear of the yAxis tick, the settings are the same as above Format label.

koolreport\d3\Waterfall::create([
    ...
    "yAxis"=>[
        "decials"=>0,
        "decPoint"=>".",
        "thousandSep"=>",",
        "prefix"=>"$",
        "suffix"=>"",
        "format"=>"function(number){
            return '$'.number;
        }"
    ]
    ...
]);

Adding summary #

By default, waterfall chart automatically adds a last bar to summarize the last total. However, you can add any bar at any place.

\koolreport\d3\Waterfall::create([
    ...
    "summary"=>[
        "Total Revenue"=>2,
        "Profit"=>"end"
    ],
    ...
])

Above example tells that you need to add a "Total Revenue" bar after the 2nd columns and the "Profit" bar at end.

Color Theme #

In order to change colors of chart bar, you can input the list of 4 colors into "colorScheme" variables. Those colors are for positive-value, negative-value, summary-postive and summary-negative respectively.

\koolreport\d3\Waterfall::create([
    ...
    "name",
    "colors"=>["#7FFF00","#FA8072","#20B2AA","#FF1493"],
    ...
])