Waterfall Chart

This chart type belongs to PowerCharts XT.

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.

{ "header": "Chart Anatomy", "subHeader": "To know how FusionCharts works, it is important to understand the various components and concepts of a chart", "content": { "header": "Below are different sections with interactive annotated images describing various components and concepts of charts", "contentGroup": [ { "itemHeader": "Waterfall Chart", "imgSrc": "waterfall-chart-anatomy.png", "annotations": [{ "annotationNumber": "1", "annotationName": "Caption", "annotationDesc": "The caption (also called the chart title) is the heading of your chart, you can add custom text for the caption, as well as configure its font properties and cosmetics.", "annotationDescLinkPath": null, "leftPosition": "38.5%", "topPosition": "7.5%", "annotationLinks": [{ "linkDesc": "Learn how to add caption ", "linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#set-the-caption-and-subcaption" }, { "linkDesc": "Font properties and cosmetics of caption can also be customized using attributes, know more about them ", "linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties" }, { "linkDesc": "You can also customize the alignment of the caption. Learn more about it ", "linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#configure-caption-alignment" } ] }, { "annotationNumber": "2", "annotationName": "Subcaption", "annotationDesc": "The sub-caption (also called the chart subtitle) is the sub-heading of your chart. You can add custom text for sub-caption, as well as configure its font properties.", "annotationDescLinkPath": null, "leftPosition": "56%", "topPosition": "14%", "annotationLinks": [{ "linkDesc": "Learn how to add sub-caption ", "linkPath": "/chart-guide/chart-configurations/axes#setting-axes-names" }, { "linkDesc": "Font properties and cosmetics of sub-caption can also be customized using attributes, learn more about them ", "linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties" } ] }, { "annotationNumber": "3", "annotationName": "Canvas Area", "annotationDesc": "Canvas area refers to the area in which the chart data is plotted, excluding the area where titles, legends, and axis names are rendered.", "annotationDescLinkPath": null, "leftPosition": "90%", "topPosition": "25%", "annotationLinks": [{ "linkDesc": "You can customize border for canvas, learn more about it ", "linkPath": "/chart-guide/chart-configurations/canvas#show-canvas-border" }, { "linkDesc": "You can customize background color for canvas, as well as add gradient fill to it. Learn more about it ", "linkPath": "/chart-guide/chart-configurations/canvas#use-gradient-fill" } ] }, { "annotationNumber": "4", "annotationName": "X-Axis", "annotationDesc": "X-Axis refers to line or values on a chart that runs horizontally (left-right). Learn more about it ", "annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names", "leftPosition": "19%", "topPosition": "70%", "annotationLinks": [] }, { "annotationNumber": "5", "annotationName": "X-Axis Labels", "annotationDesc": "X-Axis labels are the names of the data points that are displayed on the x-axis of a chart. Learn more about it ", "annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names", "leftPosition": "57.5%", "topPosition": "80%", "annotationLinks": [] }, { "annotationNumber": "6", "annotationName": "Y-Axis", "annotationDesc": "Y-Axis refers to a line of values on a chart that runs vertically (up-down) through zero. Learn more about them ", "annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names", "leftPosition": "18%", "topPosition": "14%", "annotationLinks": [] }, { "annotationNumber": "7", "annotationName": "Y-Axis Title", "annotationDesc": "Y-Axis refers to the title of the y-axis. Learn more about it ", "annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names", "leftPosition": "6.5%", "topPosition": "44%", "annotationLinks": [] }, { "annotationNumber": "8", "annotationName": "Data Plot", "annotationDesc": "Data plot refers to the columns of the column chart, lines in a line chart, pie/doughnut slices in a pie/doughnut chart.", "annotationDescLinkPath": null, "leftPosition": "36%", "topPosition": "30%", "annotationLinks": [{ "linkDesc": "You can customize the way your data plot looks using colors, gradients and hover effects using available attributes, learn more about their usage ", "linkPath": "/chart-guide/chart-configurations/data-plot" }] }, { "annotationNumber": "9", "annotationName": "Tooltip", "annotationDesc": "A tooltip is displayed when the mouse cursor hovers over a particular data point. It denotes valuable information about the data plot hovered.", "annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names", "leftPosition": "53.5%", "topPosition": "46.5%", "annotationLinks": [{ "linkDesc": "You can customize padding, size and other properties of tooltip, learn more about it ", "linkPath": "/chart-guide/chart-configurations/tool-tips#customize-tooltips" }, { "linkDesc": "You can also customize the text of tooltip and use values plotted on the chart using macros, learn more about it ", "linkPath": "/chart-guide/chart-configurations/tool-tips#introduction-to-macros" } ] } ] } ] } }

Let's create our first waterfall chart which will showcase the profit and loss analysis.

To create a waterfall chart follow the steps given below:

  • In the JSON data, set the attributes and their corresponding values in "<attributeName>": "<value>" format.

  • Specify the chart type using the type attribute. To render a waterfall chart, set waterfall.

  • Set the container object using renderAt attribute.

  • Specify the dimension of the chart using width and height attributes.

  • Set the type of data (JSON/XML) you want to pass to the chart object using dataFormat attribute.

For a detailed list of attributes, refer to the chart attributes page of waterfall chart.

The waterfall chart thus rendered looks like this:

FusionCharts will load here..
{
    "chart": {
        "theme": "fusion",
        "caption": "Total Profit Calculation",
        "subcaption": "Last month",
        "yAxisname": "Amount (In USD)",
        "numberprefix": "$",
        "connectordashed": "1",
        "sumlabel": "Total {br} Profit"
    },
    "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 theme="fusion" caption="Total Profit Calculation" subcaption="Last month" yaxisname="Amount (In USD)" numberprefix="$" connectordashed="1" sumlabel="Total {br} Profit">
    <set label="Online sales" value="420000" />
    <set label="Store Sales" value="710000" />
    <set label="Total Sales" issum="1" />
    <set label="Fixed Costs" value="-250000" />
    <set label="Variable Costs" value="-156000" />
    <set label="COGS" value="-310000" />
    <set label="Promotion Costs" value="-86000" />
    <set label="Total Costs" issum="1" cumulative="0" />
</chart>
<html>
<head>
	<title>My first chart using FusionCharts Suite XT</title>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
	<script type="text/javascript">
		FusionCharts.ready(function(){
			var chartObj = new FusionCharts({
    type: 'waterfall2d',
    renderAt: 'chart-container',
    width: '680',
    height: '390',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fusion",
            "caption": "Total Profit Calculation",
            "subcaption": "Last month",
            "yAxisname": "Amount (In USD)",
            "numberprefix": "$",
            "connectordashed": "1",
            "sumlabel": "Total {br} Profit"
        },
        "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"
        }]
    }
}
);
			chartObj.render();
		});
	</script>
	</head>
	<body>
		<div id="chart-container">FusionCharts XT will load here!</div>
	</body>
</html>

Click here to edit the waterfall chart.

Customize Colors for the 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.

To customize the chart to show distinct colors for the positive and negative columns, follow the steps given below:

  • To set the color for the positive data plots on the chart, specify the hex color code to positiveColor attribute.

  • To set the color for the negative data plots on the chart, specify the hex color code to negativeColor attribute.

Refer to the code given below:

{
  "chart": {
    "positiveColor": "#1aaf5d",
    "negativeColor": "#c02d00"
  },
}

A waterfall chart with distinct colors used for the positive and negative data plots looks like this:

FusionCharts will load here..

Click here to edit the waterfall chart.

Show/Hide Sum Columns

Show/Hide a Cumulative Sum Column

A cumulative sum column is something that will show you the sum of all columns to its left. To see the sum of all columns to its left, set the isSum attribute as 1.

Refer to the code given below:

{
  "chart": {
    "showSumAtEnd": "0"
  },
  "data": [
    {
      ...
      "issum": "1",
      ...
    }]
}

A waterfall chart rendered with a cumulative sum column looks like this:

FusionCharts will load here..

Click here to edit the waterfall chart.

Show/Hide 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. To show the non-cumulative use the following attributes:

  • Set the isSum attribute to 1 to render a column displaying sum of all the previous data values.

  • Set the cumulative attribute to 0 to render non-cumulative columns.

Refer to the code below:

{
    "chart": {
        ...
    },
    "data": [
        {
            "label": "Promotion Costs",
            "value": "-86000"
        },
        {
            "label": "Total Costs",
            "issum": "1",
            "cumulative": "0"
        }
    ]
}

A waterfall chart rendered with a non-cumulative sum column looks like this:

FusionCharts will load here..

Click here to edit the waterfall chart.

In the above chart, the 'Total Costs' column is a non-cumulative sum column.

Show/Hide 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 in 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.

To do so, the following attributes are used:

  • Set the showSumAtEnd attribute to 0 to hide the column of total sum.

  • Specify the name of the column of total sum using the sumLabel attribute.

Refer to the code below:

{
    "chart": {

        "sumlabel": "Total {br} Profit",
        "showSumAtEnd": "0"
    },
}

A waterfall chart with the total sum column hidden looks like this:

FusionCharts will load here..

Click here to edit the waterfall chart.

Customize 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.

To customize the cosmetic properties of the connector lines, follow the steps given below:

  • Set the showConnectors attribute to 0 to hide the connectors.

  • Specify the connectorColor attribute to set the hex color code for the connector lines.

  • Specify the connectorAplha attribute to set the transparency for the connector lines. This attribute takes values between 0 (transparent) and 100 (opaque).

  • Specify the connectorThickness attribute to set the thickness of the connector lines.

  • To render the connector lines as dashed lines, set the connectorDashed attribute to 1.

  • Set the length of the dash (for dashed connector lines), using connectorDashLen attribute.

  • Set the gap between each dash (for dashed connector lines), using connectorDashLen attribute.

Refer to the code given below:

{
  "chart": {
    "connectorColor": "#660000",
    "connectorAlpha": "50",
    "connectorThickness": "3",
    "connectorDashed": "1",
    "connectorDashLen": "5"
    "connectorDashGap": "2"
  },
}

A waterfall chart rendered with customized connector lines looks like this:

FusionCharts will load here..

Click here to edit the waterfall chart.