Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

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