Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

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:

FusionCharts will load here..

Given below is a brief description of the attributes used to customize colors for the positive and negative data plots:

Attribute Name Description

positiveColor

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.

negativeColor

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" } ] }
{
    "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:

FusionCharts will load here..

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

isSum

It is used to specify whether a column should represent the sum of all the previous data values. Setting this attribute to 1 will render a column as a cumulative sum column, setting it to 0 (default) will not.

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" } ] }
{
    "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:

FusionCharts will load here..

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

isSum

It is used to specify whether a column should represent the sum of all the previous data values. Setting this attribute to 1 will render a column as a sum column, setting it to 0 (default) will not.

cumulative

It is used to specify whether a sum column will be rendered as a cumulative or non-cumulative sum column. Setting this attribute to 0 will render the column as a non-cumulative sum column, setting it to 1 (default) will render it as a cumulative sum column.

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" } ] }
{
    "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:

FusionCharts will load here..

Given below is a brief description of the attribute used to hide the total sum column:

Attribute Name Description

showSumAtEnd

It is used to specify whether a total sum column will be shown on the chart. Setting this attribute to 0 will hide the total sum column, setting it to 1 (default) will show it.

sumLabel

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" } ] }
{
    "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:

FusionCharts will load here..

Given below is a brief description of the attributes used to customize connector lines:

Attribute Name Description

showConnectors

It is used to specify whether connectors will shown on the chart. Setting this attribute to 0 will hide the connectors, setting it to 1 (default) will show them.

connectorColor

It is used to specify the hex code for the color that will be used for the connector lines.

connectorAlpha

It is used to specify the transparency for the connector lines. This attribute takes values between 0 (transparent) and 100 (opaque).

connectorThickness

It is used to specify the thickness of the connector lines.

connectorDashed

It is used to specify whether the connector lines will be rendered as dashed lines. Setting this attribute to 1 will render them as dashed lines, setting it to 0 (default) will render them as whole lines.

connectorDashLen

It is used to specify the length of each dash, if dashed connector lines are to be rendered.

connectorDashGap

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" } ] }
{
    "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.

Top