Loading
Creating a Waterfall (Cascade) Chart
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:
Given below is a brief description of the attributes used to create a waterfall chart:
| Attribute Name | Description |
|---|---|
|
It is used to specify the numeric value for a column data plot, e.g. $420K. This attribute belongs to the |
|
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 |
|
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"
}
]
}There! You have now seen how you can create a simple waterfall chart.