Loading

FusionCharts Suite XT allows you to configure the functional and cosmetic properties of stacked charts.

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

  • Display the cumulative sum of stacked data

  • Create 100% stacked charts

  • Show percentage values in tool-tips

Displaying the Cumulative Sum of Stacked Data

You can opt to show the sum of all stacked data plots in a column above that column.

A stacked column 2D chart with the cumulative sum rendered above its corresponding column looks like this:

FusionCharts will load here..

Given below is a brief description of the attribute used to display the cumulative sum:

Attribute Name Description

showSum

It is used to specify whether the sum of all stacked data plots will be shown. Setting this attribute to 1 will show the sum, setting it to 0 (default) will hide it.

The data structure needed to show the cumulative sum of stacked data is given below:

{ "chart": { "theme": "fint", "caption": "Revenue split by product category", "subCaption": "For current year", "xAxisname": "Quarter", "yAxisName": "Revenues (In USD)", "showSum": "1", "numberPrefix": "$" }, "categories": [ { "category": [ { "label": "Q1" }, { "label": "Q2" }, { "label": "Q3" }, { "label": "Q4" } ] } ], "dataset": [ { "seriesname": "Food Products", "data": [ { "value": "11000" }, { "value": "15000" }, { "value": "13500" }, { "value": "15000" } ] }, { "seriesname": "Non-Food Products", "data": [ { "value": "11400" }, { "value": "14800" }, { "value": "8300" }, { "value": "11800" } ] } ] }
{
    "chart": {
        "theme": "fint",
        "caption": "Revenue split by product category",
        "subCaption": "For current year",
        "xAxisname": "Quarter",
        "yAxisName": "Revenues (In USD)",
        "showSum": "1",
        "numberPrefix": "$"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Q1"
                },
                {
                    "label": "Q2"
                },
                {
                    "label": "Q3"
                },
                {
                    "label": "Q4"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "Food Products",
            "data": [
                {
                    "value": "11000"
                },
                {
                    "value": "15000"
                },
                {
                    "value": "13500"
                },
                {
                    "value": "15000"
                }
            ]
        },
        {
            "seriesname": "Non-Food Products",
            "data": [
                {
                    "value": "11400"
                },
                {
                    "value": "14800"
                },
                {
                    "value": "8300"
                },
                {
                    "value": "11800"
                }
            ]
        }
    ]
}

Creating 100% Stacked Charts

You can use stacked charts to show the percentage distribution for individual items of a dataset. These stacked charts are called 100% Stacked Charts. The y-axis, instead of representing the actual data values, represents the percentage values.

A 100% stacked column 2D chart looks like this:

FusionCharts will load here..

Given below is a brief description of the attributes used to render a 100% stacked chart:

Attribute Name Description

stack100Percent

It is used to specify whether a 100% stacked chart will be rendered. Setting this attribute to 1 will render a 100% stacked chart, setting it to 0 (default) will render a normal stacked chart.

decimals

It is used to specify the number of digits that will be rendered after the decimal point for a data value.

The data structure needed to create a 100% stacked chart is given below:

{ "chart": { "caption": "Revenue split by product category", "subCaption": "For current year", "xAxisname": "Quarter", "yAxisName": "% Revenue", "numberPrefix": "$", "stack100Percent": "1", "decimals": "1", "showPercentInTooltip": "1", "showValues": "1", "showPercentValues": "0", "valueFontColor": "#ffffff", "theme": "fint" }, "categories": [ { "category": [ { "label": "Q1" }, { "label": "Q2" }, { "label": "Q3" }, { "label": "Q4" } ] } ], "dataset": [ { "seriesname": "Food Products", "data": [ { "value": "11000" }, { "value": "15000" }, { "value": "13500" }, { "value": "15000" } ] }, { "seriesname": "Non-Food Products", "data": [ { "value": "11400" }, { "value": "14800" }, { "value": "8300" }, { "value": "11800" } ] } ] }
{
    "chart": {
        "caption": "Revenue split by product category",
        "subCaption": "For current year",
        "xAxisname": "Quarter",
        "yAxisName": "% Revenue",
        "numberPrefix": "$",
        "stack100Percent": "1",
        "decimals": "1",
        "showPercentInTooltip": "1",
        "showValues": "1",
        "showPercentValues": "0",
        "valueFontColor": "#ffffff",
        "theme": "fint"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Q1"
                },
                {
                    "label": "Q2"
                },
                {
                    "label": "Q3"
                },
                {
                    "label": "Q4"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "Food Products",
            "data": [
                {
                    "value": "11000"
                },
                {
                    "value": "15000"
                },
                {
                    "value": "13500"
                },
                {
                    "value": "15000"
                }
            ]
        },
        {
            "seriesname": "Non-Food Products",
            "data": [
                {
                    "value": "11400"
                },
                {
                    "value": "14800"
                },
                {
                    "value": "8300"
                },
                {
                    "value": "11800"
                }
            ]
        }
    ]
}

Showing Percent Values in Tool-tips

By default, actual data values are rendered in tool-tips. You can opt to show the percentage values in tool-tips.

A stacked column chart configured to show percent values in tool-tips looks like this:

FusionCharts will load here..

Given below is a brief description of the attributes used to show percent values in tool-tips:

Attribute Name Description

showPercentInTooltip

It is used to specify whether percent values will be rendered in the tool-tip. Setting this attribute to 1 will render percent values in tool-tips, setting it to 0 (default) will render actual values.

showValues

It is used to specify whether actual data values will be rendered on the data plots. Setting this attribute to 1 will render the data values, setting it to 0 (default) will hide them.

showPercentValues

It is used to specify whether percent values will be rendered on the data plots. Setting this attribute to 1 will render the percent values, setting it to 0 (default) will hide them.

If the showValues and the showPercentValues attributes are set to 1, the latter overrides the former.

The data structure needed to render percent values in tool-tips is given below:

{ "chart": { "caption": "Revenue split by product category", "subCaption": "For current year", "xAxisname": "Quarter", "yAxisName": "% Revenue", "numberPrefix": "$", "stack100Percent": "1", "decimals": "1", "showPercentInTooltip": "1", "showValues": "1", "showPercentValues": "0", "valueFontColor": "#ffffff", "theme": "fint" }, "categories": [ { "category": [ { "label": "Q1" }, { "label": "Q2" }, { "label": "Q3" }, { "label": "Q4" } ] } ], "dataset": [ { "seriesname": "Food Products", "data": [ { "value": "11000" }, { "value": "15000" }, { "value": "13500" }, { "value": "15000" } ] }, { "seriesname": "Non-Food Products", "data": [ { "value": "11400" }, { "value": "14800" }, { "value": "8300" }, { "value": "11800" } ] } ] }
{
    "chart": {
        "caption": "Revenue split by product category",
        "subCaption": "For current year",
        "xAxisname": "Quarter",
        "yAxisName": "% Revenue",
        "numberPrefix": "$",
        "stack100Percent": "1",
        "decimals": "1",
        "showPercentInTooltip": "1",
        "showValues": "1",
        "showPercentValues": "0",
        "valueFontColor": "#ffffff",
        "theme": "fint"
    },
    "categories": [
        {
            "category": [
                {
                    "label": "Q1"
                },
                {
                    "label": "Q2"
                },
                {
                    "label": "Q3"
                },
                {
                    "label": "Q4"
                }
            ]
        }
    ],
    "dataset": [
        {
            "seriesname": "Food Products",
            "data": [
                {
                    "value": "11000"
                },
                {
                    "value": "15000"
                },
                {
                    "value": "13500"
                },
                {
                    "value": "15000"
                }
            ]
        },
        {
            "seriesname": "Non-Food Products",
            "data": [
                {
                    "value": "11400"
                },
                {
                    "value": "14800"
                },
                {
                    "value": "8300"
                },
                {
                    "value": "11800"
                }
            ]
        }
    ]
}

There! You have now seen how you can configure stacked charts.

Top