Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

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:

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.

Top