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..
{ "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"
                }
            ]
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'stackedcolumn2d',
    renderAt: 'chart-container',
    width: '500',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "Revenue split by product category",
            "subCaption": "For current year",
            "xAxisname": "Quarter",
            "yAxisName": "Revenues (In USD)",
            //Showing the Cumulative Sum of stacked data
            "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"
            }]
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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:

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..
{ "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"
                }
            ]
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'stackedcolumn2d',
    renderAt: 'chart-container',
    width: '500',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Revenue split by product category",
            "subCaption": "For current year",
            "xAxisname": "Quarter",
            "yAxisName": "% Revenue",
            "numberPrefix": "$",
            //To show revenue stack in Percentage distribution
            "stack100Percent": "1",
            "decimals": "1",
            //To show value as datavalue and percent value in tooltip
            "showPercentInTooltip": "1",
            "showValues": "1",
            "showPercentValues": "0",
            //Value font color
            "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"
            }]
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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.

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..
{ "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"
                }
            ]
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'stackedcolumn2d',
    renderAt: 'chart-container',
    width: '500',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Revenue split by product category",
            "subCaption": "For current year",
            "xAxisname": "Quarter",
            "yAxisName": "% Revenue",
            "numberPrefix": "$",
            //To show revenue stack in Percentage distribution
            "stack100Percent": "1",
            "decimals": "1",
            //To show value as datavalue and percent value in tooltip
            "showPercentInTooltip": "1",
            "showValues": "1",
            "showPercentValues": "0",
            //Value font color
            "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"
            }]
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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.

Top