Waterfall Chart

The waterfall chart is a visualization tool for illustrating how a series of positive and negative values affects an initial value. In a waterfall chart, the plotted values flow from left to right like a waterfall and represent each stage or factor that contributes to the outcome in a different column or step.

SpreadJS supports the waterfall chart which is useful for understanding the cumulative impact of sequentially introduced positive or negative values. It is commonly used in finance, project management, and other business-related scenarios to show the breakdown of a starting value into its component parts.

The chart typically starts with a bar representing the initial value, and subsequent bars are added to represent positive and negative changes. Positive values are typically represented as bars rising above the initial value, while negative values are represented as bars falling below the initial value. The final bar represents the ultimate sum or end result.

Example: Let's consider a simple example of a waterfall chart illustrating monthly salaries for an employee. Assume you start with a base salary and then add or subtract salaries of months to show the final income. You can use the subtotals property in series to accept a combined array of point index for which you want to set as total.

You can also set the showConnectorLines property to display the Connector Lines which connects the end of each column to the beginning of the next column to show the flow of the data in the chart.

The following code sample shows how to create a waterfall chart in a spreadsheet to analyze the monthly salaries.

var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
var sheet = spread.getActiveSheet();
var dataArray = [
    ['Start', 800],
    ['January', 1000],
    ['February', 1200],
    ['March', 500],
    ['April', -800],
    ['May', -400],
    ['June', 300],
    ['July', -700],
    ['August', -1000],
    ['September', 700],
    ['October', 1200],
    ['November', 2000],
    ['December', 2400],
    ['End', 7200]
];
sheet.setArray(0, 0, dataArray);

// Basic waterfall chart
let chart = sheet.charts.add("baseWaterfallChart", GC.Spread.Sheets.Charts.ChartType.waterfall, 300, 0, 700, 450, "A1:B14");
let title = chart.title();
title.text = "Monthly Income";
title.fontSize = 16;
chart.title(title);
let series = chart.series().get(0);
series.showConnectorLines = true;
series.subtotals = [13];  
chart.series().set(0, series);

However, the Waterfall Chart has certain limitations such as:

• They can't switch orientations and only support one valid series.

• They don’t support setting error bars and trendline.

• The waterfall connect-lines style is the same as the series border style.

• They can’t be combined with other chart types.

Custom Waterfall Charts

A custom waterfall chart refers to a waterfall chart that has been tailored or modified to suit specific needs or requirements beyond the standard representation. A custom waterfall chart can be created with some additional features, such as formatting the UI behavior to display the corresponding values after clicking on the data column item by setting the showValue property to true. You can also modify the appearance of the chart using properties such as backColor or fontSize.

Refer to the following image which displays the value associated with the data-column items where the backcolor of the legends is also modified.

The following sample code implements the custom waterfall chart.

let chart = sheet.charts.add("customWaterfallChart", GC.Spread.Sheets.Charts.ChartType.waterfall, 400, 0, 700, 450, "A1:B14");
let chartArea = chart.chartArea();
chartArea.fontSize = 14;
chart.chartArea(chartArea);
let dataLabels = chart.dataLabels();
dataLabels.showValue = true;
dataLabels.color = 'rgb(64,60,61)';
dataLabels.position = GC.Spread.Sheets.Charts.DataLabelPosition.center;
chart.dataLabels(dataLabels);
let legend = chart.legend();
legend.position = GC.Spread.Sheets.Charts.LegendPosition.bottom;
chart.legend(legend);
let title = chart.title();
title.text = "Monthly Income";
title.fontSize = 16;
chart.title(title);
let series = chart.series().get(0);
series.showConnectorLines = true;
series.gapWidth = 0.2;
series.subtotals = [0, 13];
chart.series().set(0, series);
chart.formatOvers({
    0: {
        backColor: "rgb(61,198,147)",
    },
    1: {
        backColor: "rgb(225,128,99)",
    },
    2: {
        backColor: "rgb(91,188,214)",
    }
});