Loading
Configuring a Waterfall (Cascade) Chart
FusionCharts Suite XT allows you to customize several cosmetic and functional properties for the waterfall chart. You can:
-
Customize colors for the positive and negative columns
-
Show/hide cumulative, non-cumulative, and total sum columns on the chart
-
Customize connectors
Customizing Colors for the Positive and Negative Columns
By default, every data plot in a waterfall chart is rendered using a different color irrespective of whether it is a positive or a negative column. You can, however, customize the chart to show distinct colors for the positive and negative columns.
A waterfall chart with distinct colors used for the positive and negative data plots looks like this:
Given below is a brief description of the attributes used to customize colors for the positive and negative data plots:
| Attribute Name | Description |
|---|---|
|
It is used to specify the hex code of the color that will be used to render all the positive data plots on the chart. |
|
It is used to specify the hex code of the color that will be used to render all the negative data plots on the chart. |
The data structure needed to customize colors for the positive and negative columns 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"
}
]
}Showing/Hiding Sum Columns on the Chart
Showing/Hiding a Cumulative Sum Column
A cumulative sum column is something that will show you the sum of all columns to its left.
A waterfall chart rendered with a cumulative sum column looks like this:
In the above waterfall chart, the ‘Total Sales’ column is a cumulative sum column.
Given below is a brief description of the attribute used to create a cumulative sum column:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether a column should represent the sum of all the previous data values. Setting this attribute to |
The data structure needed to create a cumulative sum column 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"
}
]
}Showing/Hiding a Non-cumulative Sum Column
A non-cumulative sum column is one that shows the sum of all the columns to its left, but after the last cumulative sum column.
A waterfall chart rendered with a non-cumulative sum column looks like this:
In the above chart, the ‘Total Costs’ column is a non-cumulative sum column.
Given below is a brief description of the attributes used to render a non-cumulative sum column:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether a column should represent the sum of all the previous data values. Setting this attribute to |
|
It is used to specify whether a sum column will be rendered as a cumulative or non-cumulative sum column. Setting this attribute to |
The data structure needed to render a non-cumulative sum column 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"
}
]
}Showing/Hiding a Total Sum Column
By default, a column that represents the sum of all the values plotted on the chart - the total sum column - is shown on the waterfall chart. You can, however, opt not to show this column. In the waterfall chart shown above, the ‘Total Profit’ column is the total sum column.
A waterfall chart with the total sum column hidden looks like this:
Given below is a brief description of the attribute used to hide the total sum column:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether a total sum column will be shown on the chart. Setting this attribute to |
|
It is used to specify the name of the total sum column, if you opt to show it on the chart, e.g. Total Profit. |
The data structure needed to hide the total sum column is given below:
{
"chart": {
"caption": "Total Profit Calculation",
"subcaption": "Last month",
"yAxisname": "Amount (In USD)",
"numberprefix": "$",
"connectordashed": "1",
"sumlabel": "Total {br} Profit",
"theme": "fint",
"positiveColor": "#1aaf5d",
"negativeColor": "#c02d00",
"showSumAtEnd": "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"
}
]
}Customizing Connectors
Waterfall charts, by default, display connector lines between two consecutive columns which helps in indicating the nature of transition (positive or negative). You can customize the cosmetic properties of these connector lines.
A waterfall chart rendered with customized connector lines looks like this:
Given below is a brief description of the attributes used to customize connector lines:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether connectors will shown on the chart. Setting this attribute to |
|
It is used to specify the hex code for the color that will be used for the connector lines. |
|
It is used to specify the transparency for the connector lines. This attribute takes values between 0 (transparent) and 100 (opaque). |
|
It is used to specify the thickness of the connector lines. |
|
It is used to specify whether the connector lines will be rendered as dashed lines. Setting this attribute to |
|
It is used to specify the length of each dash, if dashed connector lines are to be rendered. |
|
It is used to specify the gap between each dash, if dashed connector lines are to be rendered. |
The data structure needed to customize connectors is given below:
{
"chart": {
"caption": "Total Profit Calculation",
"subcaption": "Last month",
"yAxisname": "Amount (In USD)",
"numberprefix": "$",
"sumlabel": "Total {br} Profit",
"theme": "fint",
"positiveColor": "#1aaf5d",
"negativeColor": "#c02d00",
"showConnectors": "1",
"connectorColor": "#660000",
"connectorAlpha": "50",
"connectorThickness": "3",
"connectorDashed": "1",
"connectorDashLen": "5"
},
"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 customize waterfall charts.