Creating a Stacked Chart

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 Line Single Y
Stacked Column 3D Line Single Y
Stacked Column 3D Line Dual Y
Multi-series Stacked Column 2D Chart
Multi-series Stacked Column 2D Line Dual Y
Scroll Stacked Column 2D

Creating a Stacked 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 stacked column 2D chart thus created looks like this:

Chart
JSON
XML
HTML

FusionCharts will load here..

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

{
    "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>

In the above stacked chart, 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.

Brief Explanation of the JSON Data Structure

In the JSON data, the attributes and their corresponding values are written in the following key-value pair format:

"<attributeName>": "<value>"

Given below is a brief description of the data structure used to create the above stacked column 2D chart:

Attribute Name	Description
`type`	It is used to specify the type of chart you want to render. For example, to render a stacked column 2D chart, the value for this attribute will be `stackedcolumn2d`.
`renderAt`	It is used to specify the container object where the chart will be rendered.
`width`	It is used to specify the width of the chart.
`height`	It is used to specify the height of the chart.
`dataFormat`	It is used to specify the type of data that will passed to the chart object. This attribute takes two values: `json`, where the JSON data to render the chart is passed to the `dataSource` attribute, and `jsonurl`, where the relative path to a .json file is passed to the `dataSource` attribute.
`dataSource`	It specifies the source from where the data will be fetched, depending on the value passed to the `dataFormat` attribute.
`caption`	It is used to specify the chart caption. This attribute belongs to the `chart` object.
`subCaption`	It is used to specify the chart sub-caption. This attribute belongs to the `chart` object.
`xAxisName`	It is used to specify the name for the x-axis.
`yAxisName`	It is used to specify the name for the y-axis.
`showSum`	FusionCharts Suite XT allows you to show the sum of all data plots stacked above each other in one column above the column. This attribute 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.
`numberPrefix`	It is used to specify the character that will precede all numeric values on the chart, e.g. `$` for the currency symbol.
`theme`	It is used to specify the theme for the chart.
`label`	It is used to specify the label for a data item. The label is rendered on the x-axis. This attribute belongs to the `category` object array, which in turn belongs to the `categories` object array.
`value`	It is used to specify the value for a data item. This attribute belongs to the `data` object array, which in turn belongs to the `dataset` object array.
`seriesName`	It is used to specify a name for the dataset. This name is shown in the legend box rendered below the chart. This attribute belongs to the `dataset` object array.