Stacked Charts
These chart types belong to FusionCharts XT.
Stacked charts are similar to multi-series charts , but plot datasets on top of each other, instead of the clustered side-by-side placement adopted by multi-series charts. Stacked charts help in displaying the cumulative magnitude of two or more data series. They help in representing a data value as a sum of two or more values. Each data series can be distinguished by the color of its section in the stack.
The FusionCharts Suite XT includes the following types of stacked charts:
Stacked Column 2D Chart
Stacked Column 3D Chart
Stacked Area 2D Chart
Stacked Bar 2D Chart
Stacked Bar 3D Chart
Stacked column 2D Chart
As an example, we will create a stacked column 2D chart to plot the revenue split for each quarter of the current year by product category - food products and non-food products. The data plots for each category are rendered using two distinct colors to help interpretation. The data plots for non-food products are stacked above the data plots for food products, instead of alongside as in multi-series charts.
To create a stacked column chart in 2D 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
typeattribute. To render a stacked column 2D chart, setstackedcolumn2d.Set the container object using
renderAtattribute.Specify the dimension of the chart using
widthandheightattributes.Set the type of data (JSON/XML) you want to pass to the chart object using
dataFormatattribute.
For a detailed list of attributes, refer to the chart attributes page of stacked column 2D chart.
The stacked column 2D chart thus created looks like this:
{
"chart": {
"caption": "Revenue split by product category",
"subCaption": "For current year",
"xAxisname": "Quarter",
"yAxisName": "Revenues (In USD)",
"showSum": "1",
"numberPrefix": "$",
"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": "Revenues (In USD)",
"showSum": "1",
"numberPrefix": "$",
"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>Click here to edit the stacked column 2D chart.
Stacked Column 3D Chart
To render a stacked column chart in 3D, change the value of the type attribute from stackedcolumn2d to stackedcolumn3d. The rest of the data structure remains the same.
For a detailed list of attributes, refer to the chart attributes page of stacked column 3D chart.
A stacked column chart in 3D looks like:
{
"chart": {
"caption": "Revenue split by product category",
"subCaption": "For current year",
"xAxisname": "Quarter",
"yAxisName": "Revenues (In USD)",
"numberPrefix": "$",
"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: 'stackedcolumn3d',
renderAt: 'chart-container',
width: '500',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Revenue split by product category",
"subCaption": "For current year",
"xAxisname": "Quarter",
"yAxisName": "Revenues (In USD)",
"numberPrefix": "$",
"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>Click here to edit the stacked column 3D chart.
Stacked Area 2D Chart
To render a stacked area chart in 2D, change the value of the type attribute from stackedcolumn3d to stackedarea2d. The rest of the data structure remains the same.
For a detailed list of attributes, refer to the chart attributes page of stacked area 2D chart.
A stacked area chart in 2D looks like:
{
"chart": {
"caption": "Harry's SuperMart",
"subCaption": "Product-wise quarterly revenue in current year",
"xAxisname": "Quarter",
"yAxisName": "Amount",
"numberPrefix": "$",
"paletteColors": "#0075c2,#1aaf5d",
"bgColor": "#ffffff",
"borderAlpha": "20",
"showCanvasBorder": "0",
"usePlotGradientColor": "0",
"plotBorderAlpha": "10",
"legendBorderAlpha": "0",
"legendShadow": "0",
"showValues": "0",
"showBorder": "0",
"showXAxisLine": "1",
"xAxisLineColor": "#999999",
"divlineColor": "#999999",
"divLineIsDashed": "1",
"showAlternateHGridColor": "0",
"subcaptionFontBold": "0",
"subcaptionFontSize": "14"
},
"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: 'stackedarea2d',
renderAt: 'chart-container',
width: '450',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Harry's SuperMart",
"subCaption": "Product-wise quarterly revenue in current year",
"xAxisname": "Quarter",
"yAxisName": "Amount",
"numberPrefix": "$",
"paletteColors": "#0075c2,#1aaf5d",
"bgColor": "#ffffff",
"borderAlpha": "20",
"showCanvasBorder": "0",
"usePlotGradientColor": "0",
"plotBorderAlpha": "10",
"legendBorderAlpha": "0",
"legendShadow": "0",
"showValues": "0",
"showBorder": "0",
"showXAxisLine": "1",
"xAxisLineColor": "#999999",
"divlineColor": "#999999",
"divLineIsDashed": "1",
"showAlternateHGridColor": "0",
"subcaptionFontBold": "0",
"subcaptionFontSize": "14"
},
"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>Click here to edit the stacked area 2D chart.
Stacked Bar 2D Chart
To render a stacked bar chart in 2D, change the value of the type attribute from stackedarea2d to stackedbar2d. The rest of the data structure remains the same.
For a detailed list of attributes, refer to the chart attributes page of stacked bar 2D chart.
A stacked bar chart in 2D looks like:
{
"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: 'stackedbar2d',
renderAt: 'chart-container',
width: '450',
height: '400',
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>Click here to edit the stacked bar 2D chart.
Stacked Bar 3D Chart
To render a stacked bar chart in 3D, change the value of the type attribute from stackedbar2d to stackedbar3d. The rest of the data structure remains the same.
For a detailed list of attributes, refer to the chart attributes page of stacked bar 3D chart.
A stacked bar chart in 3D looks like:
{
"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: 'stackedbar3d',
renderAt: 'chart-container',
width: '450',
height: '400',
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>Click here to edit the stacked bar 3D chart.
Some of the other stacked charts are shown in combination charts and scroll charts section.
Now, let's customize the appearance and properties of the charts.
Display the Cumulative Sum
You can opt to show the sum of all stacked data plots in a column above that column. To show the sum of all stacked data plots, set the showSum attribute to 1.
Refer to the code given below:
{
"chart": {
"showSum": "1"
},
}A stacked column 2D chart with the cumulative sum rendered above its corresponding column looks like this:
Click here to edit the above stacked column 2D chart.
Create 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.
To create a 100% stacked column chart, set the stack100Percent attribute to 1.
Refer to the code given below:
{
"chart": {
"stack100Percent": "1"
},
}A 100% stacked column 2D chart looks like this:
Click here to edit the above stacked column 2D chart.
Show Percent Values in Tool-Tips
By default, actual data values are rendered in tool-tips. Set the showPercentInToolTip to 1 to show the percentage values in tool-tips.
Refer to the code given below:
{
"chart": {
"showPercentInTooltip": "1"
},
}A stacked column chart configured to show percent values in tool-tips looks like this:
Click here to edit the above stacked column 2D chart.