Loading

A waterfall (cascade) chart is a special type of column chart that is used to show how an initial value is increased and decreased by a series of intermediate values, leading to a final value.

In this section, you will be shown how you can:

  • Create a waterfall chart

  • Customize a waterfall chart

Creating a Waterfall Chart

As an example, we will create a waterfall chart to show the profit and loss analysis.

The waterfall chart thus rendered looks like this:

FusionCharts will load here..

Given below is a brief description of the attributes used to create a waterfall chart:

Attribute Name Description

value

It is used to specify the numeric value for a column data plot, e.g. $420K. This attribute belongs to the data object.

label

It is used to specify the label that will be rendered for a column data plot, e.g. Online Sales. This attribute belongs to the data object.

numberPrefix

It is used to specify the character that will be prefixed to a numeric data value.

The data structure needed to create a simple waterfall chart is given below:

{ "chart": { "caption": "Total Profit Calculation", "subcaption": "Last month", "yAxisname": "Amount (In USD)", "numberprefix": "$", "connectordashed": "1", "sumlabel": "Total {br} Profit", "positiveColor": "#6baa01", "negativeColor": "#e44a00", "paletteColors": "#0075c2,#1aaf5d,#f2c500", "baseFontColor": "#333333", "baseFont": "Helvetica Neue,Arial", "captionFontSize": "14", "subcaptionFontSize": "14", "subcaptionFontBold": "0", "showBorder": "0", "bgColor": "#ffffff", "showShadow": "0", "canvasBgColor": "#ffffff", "canvasBorderAlpha": "0", "divlineAlpha": "100", "divlineColor": "#999999", "divlineThickness": "1", "divLineIsDashed": "1", "divLineDashLen": "1", "divLineGapLen": "1", "usePlotGradientColor": "0", "showplotborder": "0", "showXAxisLine": "1", "xAxisLineThickness": "1", "xAxisLineColor": "#999999", "showAlternateHGridColor": "0" }, "data": [ { "label": "Online sales", "value": "420000" }, { "label": "Store Sales", "value": "710000" }, { "label": "Total Sales", "issum": "1" }, { "label": "Fixed Costs", "value": "-250000" }, { "label": "Variable Costs", "value": "-156000" }, { "label": "COGS", "value": "-310000" }, { "label": "Promotion Costs", "value": "-86000" }, { "label": "Total Costs", "issum": "1", "cumulative": "0" } ] }
{
    "chart": {
        "caption": "Total Profit Calculation",
        "subcaption": "Last month",
        "yAxisname": "Amount (In USD)",
        "numberprefix": "$",
        "connectordashed": "1",
        "sumlabel": "Total {br} Profit",
        "positiveColor": "#6baa01",
        "negativeColor": "#e44a00",
        "paletteColors": "#0075c2,#1aaf5d,#f2c500",
        "baseFontColor": "#333333",
        "baseFont": "Helvetica Neue,Arial",
        "captionFontSize": "14",
        "subcaptionFontSize": "14",
        "subcaptionFontBold": "0",
        "showBorder": "0",
        "bgColor": "#ffffff",
        "showShadow": "0",
        "canvasBgColor": "#ffffff",
        "canvasBorderAlpha": "0",
        "divlineAlpha": "100",
        "divlineColor": "#999999",
        "divlineThickness": "1",
        "divLineIsDashed": "1",
        "divLineDashLen": "1",
        "divLineGapLen": "1",
        "usePlotGradientColor": "0",
        "showplotborder": "0",
        "showXAxisLine": "1",
        "xAxisLineThickness": "1",
        "xAxisLineColor": "#999999",
        "showAlternateHGridColor": "0"
    },
    "data": [
        {
            "label": "Online sales",
            "value": "420000"
        },
        {
            "label": "Store Sales",
            "value": "710000"
        },
        {
            "label": "Total Sales",
            "issum": "1"
        },
        {
            "label": "Fixed Costs",
            "value": "-250000"
        },
        {
            "label": "Variable Costs",
            "value": "-156000"
        },
        {
            "label": "COGS",
            "value": "-310000"
        },
        {
            "label": "Promotion Costs",
            "value": "-86000"
        },
        {
            "label": "Total Costs",
            "issum": "1",
            "cumulative": "0"
        }
    ]
}

There! You have now seen how you can create a simple waterfall chart.

Top