• Properties
• Format label
• Format YAxis
• Adding summary
• Color Theme

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 #

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;
            }"
        ]
    ],
    ...
]);

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"],
    ...
])