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
A stacked column 2D chart looks as follows:
{
"header": "Chart Anatomy",
"subHeader": "To know how FusionCharts works it is important to understand the various components and concepts of a chart",
"content": {
"header": "Below are different sections with interactive annotated images describing various components and concepts of charts",
"contentGroup": [
{
"itemHeader": "Stacked Chart",
"imgSrc": "stacked-chart-anatomy.png",
"annotations": [{
"annotationNumber": "1",
"annotationName": "Caption",
"annotationDesc": "The caption (also called the chart title) is the heading of your chart. You can add custom text for the caption, as well as configure its font properties and cosmetics.",
"annotationDescLinkPath": null,
"leftPosition": "34%",
"topPosition": "10.5%",
"annotationLinks": [{
"linkDesc": "Learn how to add caption ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#set-the-caption-and-subcaption"
},
{
"linkDesc": "Font properties and cosmetics of caption can also be customized using attributes. Know more about them ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties"
},
{
"linkDesc": "You can also customize the alignment of the caption. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#configure-caption-alignment"
}
]
},
{
"annotationNumber": "2",
"annotationName": "Subcaption",
"annotationDesc": "The subcaption (also called the chart subtitle) is the subheading of your chart. You can add custom text for subcaption, as well as configure its font properties. Learn more about it ",
"annotationDescLinkPath": null,
"leftPosition": "57%",
"topPosition": "16.5%",
"annotationLinks": [{
"linkDesc": "Learn how to add subcaption ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#set-the-caption-and-subcaption"
},
{
"linkDesc": "Font properties and cosmetics of subcaption can also be customized using attributes. Learn more about them ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties"
}
]
},
{
"annotationNumber": "3",
"annotationName": "Canvas Area",
"annotationDesc": "Canvas area refers to the area in which the chart data is plotted, excluding the area where titles, legends, and axis names are rendered.",
"annotationDescLinkPath": null,
"leftPosition": "82%",
"topPosition": "30%",
"annotationLinks": [{
"linkDesc": "You can customize border for canvas. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/canvas#show-canvas-border"
},
{
"linkDesc": "You can customize background color for canvas, as well as add gradient fill to it. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/canvas#use-gradient-fill"
}
]
},
{
"annotationNumber": "4",
"annotationName": "X-Axis",
"annotationDesc": "X-Axis refers to line or values on a chart that runs horizontally (left-right). Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "80%",
"topPosition": "63%",
"annotationLinks": []
},
{
"annotationNumber": "5",
"annotationName": "X-Axis Title",
"annotationDesc": "X-Axis refers to title of the x-axis. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "55%",
"topPosition": "72%",
"annotationLinks": []
},
{
"annotationNumber": "6",
"annotationName": "X-Axis Labels",
"annotationDesc": "X-Axis labels are the names of the data points that are displayed on the x-axis of a chart. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "38.5%",
"topPosition": "66%",
"annotationLinks": []
},
{
"annotationNumber": "7",
"annotationName": "Y-Axis",
"annotationDesc": "Y-Axis refers to line or values on a chart that runs vertically (up-down) through zero. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "13%",
"topPosition": "68%",
"annotationLinks": []
},
{
"annotationNumber": "8",
"annotationName": "Y-Axis Title",
"annotationDesc": "Y-Axis refers to the title of the y-axis. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "7%",
"topPosition": "40%",
"annotationLinks": []
},
{
"annotationNumber": "9",
"annotationName": "Data Plot",
"annotationDesc": "Data plot refers to the columns of the column chart, lines in a line chart, pie/doughnut slices in a pie/doughnut chart.",
"annotationDescLinkPath": null,
"leftPosition": "74%",
"topPosition": "51.5%",
"annotationLinks": [{
"linkDesc": "You can customize the way your data plot looks using colors, gradients and hover effects using available attributes. Learn more about their usage ",
"linkPath": "/chart-guide/chart-configurations/data-plot"
}]
},
{
"annotationNumber": "10",
"annotationName": "Legend",
"annotationDesc": "A legend is a chart element used to display the series name for each dataset, in case of multi-series or combination charts. Legends are used to correlate a data plot to its series name using its color.",
"annotationDescLinkPath": null,
"leftPosition": "32.5%",
"topPosition": "78.5%",
"annotationLinks": [{
"linkDesc": "You can customize look and feel of legend like increase/decrease legend icon size, define custom legend icons, legend scroll, etc. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/legend#configure-legend-icon-size"
},
{
"linkDesc": "You can customize legend position on the chart either to right or bottom of the chart. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/legend#set-the-legend-position"
},
{
"linkDesc": "You can highlight data plots by hovering over corresponding legend item using plot highlight effects. Learn more about them ",
"linkPath": "/chart-guide/chart-configurations/legend#highlight-a-data-series-via-the-legend"
}
]
},
{
"annotationNumber": "11",
"annotationName": "Tooltip",
"annotationDesc": "A tooltip is displayed when the mouse cursor hovers over a particular data point. It denotes valuable information about the data plot hovered.",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "65.5%",
"topPosition": "25.5%",
"annotationLinks": [{
"linkDesc": "You can customize padding, size and other properties of tooltips. Learn more about them ",
"linkPath": "/chart-guide/chart-configurations/tool-tips#customize-tooltips"
},
{
"linkDesc": "You can also customize the text of tooltip and use values plotted on the chart using macros. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/tool-tips#introduction-to-macros"
}
]
},
{
"annotationNumber": "12",
"annotationName": "Export Menu",
"annotationDesc": "Export menu is hamburger menu that appears on top-right of the chart by hovering on which you can export the chart using available options.",
"annotationDescLinkPath": null,
"leftPosition": "85.5%",
"topPosition": "9%",
"annotationLinks": [{
"linkDesc": "You can enable or disable chart export using attribute `exportEnabled`. Learn more about its usage ",
"linkPath": "/exporting-charts/using-fc-export-server/exporting-charts-as-image-and-pdf"
},
{
"linkDesc": "You can also define export mode like `server`, `client`, or `auto` for chart export. Learn more about them ",
"linkPath": "/exporting-charts/using-fc-export-server/modes-of-export/exporting-charts-and-chart-data-using-the-server-side-export-feature"
},
{
"linkDesc": "Look and feel of this menu can also be customized using available attributes. Learn more about them ",
"linkPath": "/chart-attributes/area2d"
}
]
},
{
"annotationNumber": "13",
"annotationName": "Data Values",
"annotationDesc": "Data values are plot values, i.e. values of each data plot (line, column, bar, pie) displayed on the chart. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/data-values",
"leftPosition": "27%",
"topPosition": "22%",
"annotationLinks": []
}
]
}
]
}
}
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:
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": "fusion"
},
"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="fusion">
<categories>
<category label="Q1" />
<category label="Q2" />
<category label="Q3" />
<category label="Q4" />
</categories>
<dataset seriesname="Food Products">
<set value="11000" />
<set value="15000" />
<set value="13500" />
<set value="15000" />
</dataset>
<dataset seriesname="Non-Food Products">
<set value="11400" />
<set value="14800" />
<set value="8300" />
<set value="11800" />
</dataset>
</chart><html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var chartObj = new FusionCharts({
type: 'stackedcolumn2d',
renderAt: 'chart-container',
width: '680',
height: '390',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Revenue split by product category",
"subCaption": "For current year",
"xAxisname": "Quarter",
"yAxisName": "Revenues (In USD)",
"showSum": "1",
"numberPrefix": "$",
"theme": "fusion"
},
"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"
}]
}]
}
}
);
chartObj.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:
FusionCharts will load here..
{
"chart": {
"caption": "Revenue split by product category",
"subCaption": "For current year",
"xAxisname": "Quarter",
"yAxisName": "Revenues (In USD)",
"numberPrefix": "$",
"showValues": "1",
"theme": "fusion"
},
"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)" numberprefix="$" showvalues="1" theme="fusion">
<categories>
<category label="Q1" />
<category label="Q2" />
<category label="Q3" />
<category label="Q4" />
</categories>
<dataset seriesname="Food Products">
<set value="11000" />
<set value="15000" />
<set value="13500" />
<set value="15000" />
</dataset>
<dataset seriesname="Non-Food Products">
<set value="11400" />
<set value="14800" />
<set value="8300" />
<set value="11800" />
</dataset>
</chart><html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var chartObj = new FusionCharts({
type: 'stackedcolumn3d',
renderAt: 'chart-container',
width: '680',
height: '390',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Revenue split by product category",
"subCaption": "For current year",
"xAxisname": "Quarter",
"yAxisName": "Revenues (In USD)",
"numberPrefix": "$",
"showValues": "1",
"theme": "fusion"
},
"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"
}]
}]
}
}
);
chartObj.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.
{
"header": "Chart Anatomy",
"subHeader": "To know how FusionCharts works it is important to understand the various components and concepts of a chart",
"content": {
"header": "Below are different sections with interactive annotated images describing various components and concepts of charts",
"contentGroup": [{
"_itemHeader": "Stacked Area Chart Anatomy",
"imgSrc": "stacked-area-chart-anatomy.png",
"annotations": [{
"annotationNumber": "1",
"annotationName": "Caption",
"annotationDesc": "The caption (also called the chart title) is the heading of your chart. You can add custom text for the caption, as well as configure its font properties and cosmetics. Learn more about it ",
"annotationDescLinkPath": null,
"leftPosition": "41%",
"topPosition": "1.5%",
"annotationLinks": [{
"linkDesc": "Learn how to add caption ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#set-the-caption-and-subcaption"
},
{
"linkDesc": "Font properties and cosmetics of caption can also be customized using attributes, know more about them ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties"
},
{
"linkDesc": "You can also customize the alignment of the caption. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#configure-caption-alignment"
}
]
},
{
"annotationNumber": "2",
"annotationName": "Subcaption",
"annotationDesc": "The subcaption (also called the chart subtitle) is the subheading of your chart. You can add custom text for sub-caption, as well as configure its font properties.",
"annotationDescLinkPath": null,
"leftPosition": "70.5%",
"topPosition": "6.5%",
"annotationLinks": [{
"linkDesc": "Learn how to add subcaption ",
"linkPath": "/chart-guide/chart-configurations/axes#setting-axes-names"
},
{
"linkDesc": "Font properties and cosmetics of subcaption can also be customized using attributes. Learn more about them ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties"
}
]
},
{
"annotationNumber": "3",
"annotationName": "Canvas Area",
"annotationDesc": "Canvas area refers to the area in which the chart data is plotted, excluding the area where titles, legends, and axis names are rendered.",
"annotationDescLinkPath": null,
"leftPosition": "80%",
"topPosition": "2%",
"annotationLinks": [{
"linkDesc": "You can customize border for canvas. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/canvas#show-canvas-border"
},
{
"linkDesc": "You can customize background color for canvas, as well as add gradient fill to it. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/canvas#use-gradient-fill"
}
]
},
{
"annotationNumber": "4",
"annotationName": "X-Axis",
"annotationDesc": "X-Axis refers to line or values on a chart that runs horizontally (left-right). Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "86%",
"topPosition": "62%",
"annotationLinks": []
},
{
"annotationNumber": "5",
"annotationName": "X-Axis Title",
"annotationDesc": "It refers to title of the X-axis. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "46%",
"topPosition": "74%",
"annotationLinks": []
},
{
"annotationNumber": "6",
"annotationName": "X-Axis Labels",
"annotationDesc": "X-Axis labels are the names of the data points that are displayed on the X-axis of a chart. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "66%",
"topPosition": "66.5%",
"annotationLinks": []
},
{
"annotationNumber": "7",
"annotationName": "Y-Axis",
"annotationDesc": "Y-Axis refers to line or values on a chart that runs vertically (up-down) through zero. Learn more about them ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "20%",
"topPosition": "4%",
"annotationLinks": []
},
{
"annotationNumber": "8",
"annotationName": "Y-Axis Title",
"annotationDesc": "Y-Axis refers to the title of the Y-axis. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "8%",
"topPosition": "37%",
"annotationLinks": []
},
{
"annotationNumber": "9",
"annotationName": "Data Plot",
"annotationDesc": "Data plot refers to the columns of the column chart, lines in a line chart, pie/doughnut slices in a pie/doughnut chart, and so on.",
"annotationDescLinkPath": null,
"leftPosition": "30%",
"topPosition": "46.5%",
"annotationLinks": [{
"linkDesc": "You can customize the way your data plot looks using colors, gradients and hover effects using available attributes, learn more about their usage ",
"linkPath": "/chart-guide/chart-configurations/data-plot"
}]
},
{
"annotationNumber": "10",
"annotationName": "Legend",
"annotationDesc": "A legend is a chart element used to display the series name for each dataset, in case of multi-series or combination charts. Legends are used to correlate a data plot to its series name using its color.",
"annotationDescLinkPath": null,
"leftPosition": "32%",
"topPosition": "81.5%",
"annotationLinks": [{
"linkDesc": "You can customize look and feel of legend like increase/decrease legend icon size, define custom legend icons, legend scroll, etc. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/legend#configure-legend-icon-size"
},
{
"linkDesc": "You can customize legend position on the chart either to right or bottom of the chart. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/legend#set-the-legend-position"
},
{
"linkDesc": "You can highlight data plots by hovering over corresponding legend item using plot highlight effects. Learn more about them ",
"linkPath": "/chart-guide/chart-configurations/legend#highlight-a-data-series-via-the-legend"
}
]
},
{
"annotationNumber": "11",
"annotationName": "Tooltip",
"annotationDesc": "A tooltip is displayed when the mouse cursor hovers over a particular data point. It denotes valuable information about the data plot hovered.",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "74%",
"topPosition": "34.5%",
"annotationLinks": [{
"linkDesc": "You can customize padding, size and other properties of tooltip, learn more about it ",
"linkPath": "/chart-guide/chart-configurations/tool-tips#customize-tooltips"
},
{
"linkDesc": "You can also customize the text of tooltip and use values plotted on the chart using macros, learn more about it ",
"linkPath": "/chart-guide/chart-configurations/tool-tips#introduction-to-macros"
}
]
}
]
}
]
}
}
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:
FusionCharts will load here..
{
"chart": {
"theme": "fusion",
"caption": "Harry's SuperMart",
"subCaption": "Product-wise quarterly revenue in current year",
"xAxisname": "Quarter",
"yAxisName": "Amount",
"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="fusion" caption="Harry's SuperMart" subcaption="Product-wise quarterly revenue in current year" xaxisname="Quarter" yaxisname="Amount" numberprefix="$">
<categories>
<category label="Q1" />
<category label="Q2" />
<category label="Q3" />
<category label="Q4" />
</categories>
<dataset seriesname="Food Products">
<set value="11000" />
<set value="15000" />
<set value="13500" />
<set value="15000" />
</dataset>
<dataset seriesname="Non-Food Products">
<set value="11400" />
<set value="14800" />
<set value="8300" />
<set value="11800" />
</dataset>
</chart><html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var chartObj = new FusionCharts({
type: 'stackedarea2d',
renderAt: 'chart-container',
width: '600',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"caption": "Harry's SuperMart",
"subCaption": "Product-wise quarterly revenue in current year",
"xAxisname": "Quarter",
"yAxisName": "Amount",
"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"
}
]
}
]
}
});
chartObj.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.
{
"header": "Chart Anatomy",
"subHeader": "To know how FusionCharts works it is important to understand the various components and concepts of a chart",
"content": {
"header": "Below are different sections with interactive annotated images describing various components and concepts of charts",
"contentGroup": [
{
"_itemHeader": "Stacked Chart",
"imgSrc": "stacked-bar-chart-anatomy.png",
"annotations": [{
"annotationNumber": "1",
"annotationName": "Caption",
"annotationDesc": "The caption (also called the chart title) is the heading of your chart. You can add custom text for the caption, as well as configure its font properties and cosmetics.",
"annotationDescLinkPath": null,
"leftPosition": "30%",
"topPosition": "3.5%",
"annotationLinks": [{
"linkDesc": "Learn how to add caption ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#set-the-caption-and-subcaption"
},
{
"linkDesc": "Font properties and cosmetics of caption can also be customized using attributes. Know more about them ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties"
},
{
"linkDesc": "You can also customize the alignment of the caption. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#configure-caption-alignment"
}
]
},
{
"annotationNumber": "2",
"annotationName": "Subcaption",
"annotationDesc": "The subcaption (also called the chart subtitle) is the subheading of your chart. You can add custom text for subcaption, as well as configure its font properties. Learn more about it ",
"annotationDescLinkPath": null,
"leftPosition": "56.5%",
"topPosition": "10.5%",
"annotationLinks": [{
"linkDesc": "Learn how to add subcaption ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#set-the-caption-and-subcaption"
},
{
"linkDesc": "Font properties and cosmetics of subcaption can also be customized using attributes. Learn more about them ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties"
}
]
},
{
"annotationNumber": "3",
"annotationName": "Canvas Area",
"annotationDesc": "Canvas area refers to the area in which the chart data is plotted, excluding the area where titles, legends, and axis names are rendered.",
"annotationDescLinkPath": null,
"leftPosition": "70%",
"topPosition": "10%",
"annotationLinks": [{
"linkDesc": "You can customize border for canvas. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/canvas#show-canvas-border"
},
{
"linkDesc": "You can customize background color for canvas, as well as add gradient fill to it. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/canvas#use-gradient-fill"
}
]
},
{
"annotationNumber": "4",
"annotationName": "X-Axis",
"annotationDesc": "X-Axis refers to line or values on a chart that runs horizontally (left-right). Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "26%",
"topPosition": "11%",
"annotationLinks": []
},
{
"annotationNumber": "5",
"annotationName": "X-Axis Title",
"annotationDesc": "X-Axis refers to title of the x-axis. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "16%",
"topPosition": "38%",
"annotationLinks": []
},
{
"annotationNumber": "6",
"annotationName": "X-Axis Labels",
"annotationDesc": "X-Axis labels are the names of the data points that are displayed on the x-axis of a chart. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "24%",
"topPosition": "51%",
"annotationLinks": []
},
{
"annotationNumber": "7",
"annotationName": "Y-Axis",
"annotationDesc": "Y-Axis refers to line or values on a chart that runs vertically (up-down) through zero. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "69%",
"topPosition": "63%",
"annotationLinks": []
},
{
"annotationNumber": "8",
"annotationName": "Y-Axis Title",
"annotationDesc": "Y-Axis refers to the title of the y-axis. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "58.5%",
"topPosition": "75%",
"annotationLinks": []
},
{
"annotationNumber": "9",
"annotationName": "Data Plot",
"annotationDesc": "Data plot refers to the columns of the column chart, lines in a line chart, pie/doughnut slices in a pie/doughnut chart.",
"annotationDescLinkPath": null,
"leftPosition": "42%",
"topPosition": "44.5%",
"annotationLinks": [{
"linkDesc": "You can customize the way your data plot looks using colors, gradients and hover effects using available attributes. Learn more about their usage ",
"linkPath": "/chart-guide/chart-configurations/data-plot"
}]
},
{
"annotationNumber": "10",
"annotationName": "Legend",
"annotationDesc": "A legend is a chart element used to display the series name for each dataset, in case of multi-series or combination charts. Legends are used to correlate a data plot to its series name using its color.",
"annotationDescLinkPath": null,
"leftPosition": "68.5%",
"topPosition": "82%",
"annotationLinks": [{
"linkDesc": "You can customize look and feel of legend like increase/decrease legend icon size, define custom legend icons, legend scroll, etc. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/legend#configure-legend-icon-size"
},
{
"linkDesc": "You can customize legend position on the chart either to right or bottom of the chart. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/legend#set-the-legend-position"
},
{
"linkDesc": "You can highlight data plots by hovering over corresponding legend item using plot highlight effects. Learn more about them ",
"linkPath": "/chart-guide/chart-configurations/legend#highlight-a-data-series-via-the-legend"
}
]
},
{
"annotationNumber": "11",
"annotationName": "Tooltip",
"annotationDesc": "A tooltip is displayed when the mouse cursor hovers over a particular data point. It denotes valuable information about the data plot hovered.",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "56%",
"topPosition": "27%",
"annotationLinks": [{
"linkDesc": "You can customize padding, size and other properties of tooltips. Learn more about them ",
"linkPath": "/chart-guide/chart-configurations/tool-tips#customize-tooltips"
},
{
"linkDesc": "You can also customize the text of tooltip and use values plotted on the chart using macros. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/tool-tips#introduction-to-macros"
}
]
},
{
"annotationNumber": "12",
"annotationName": "Data Values",
"annotationDesc": "Data values are plot values, i.e. values of each data plot (line, column, bar, pie) displayed on the chart. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/data-values",
"leftPosition": "74.5%",
"topPosition": "32%",
"annotationLinks": []
}
]
}
]
}
}
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:
FusionCharts will load here..
{
"chart": {
"theme": "fusion",
"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="fusion" caption="Revenue split by product category" subcaption="For current year" xaxisname="Quarter" yaxisname="Revenues (In USD)" showsum="1" numberprefix="$">
<categories>
<category label="Q1" />
<category label="Q2" />
<category label="Q3" />
<category label="Q4" />
</categories>
<dataset seriesname="Food Products">
<set value="11000" />
<set value="15000" />
<set value="13500" />
<set value="15000" />
</dataset>
<dataset seriesname="Non-Food Products">
<set value="11400" />
<set value="14800" />
<set value="8300" />
<set value="11800" />
</dataset>
</chart><html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var chartObj = new FusionCharts({
type: 'stackedbar2d',
renderAt: 'chart-container',
width: '450',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"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"
}
]
}
]
}
});
chartObj.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:
FusionCharts will load here..
{
"chart": {
"theme": "fusion",
"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="fusion" caption="Revenue split by product category" subcaption="For current year" xaxisname="Quarter" yaxisname="Revenues (In USD)" showsum="1" numberprefix="$">
<categories>
<category label="Q1" />
<category label="Q2" />
<category label="Q3" />
<category label="Q4" />
</categories>
<dataset seriesname="Food Products">
<set value="11000" />
<set value="15000" />
<set value="13500" />
<set value="15000" />
</dataset>
<dataset seriesname="Non-Food Products">
<set value="11400" />
<set value="14800" />
<set value="8300" />
<set value="11800" />
</dataset>
</chart><html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var chartObj = new FusionCharts({
type: 'stackedbar3d',
renderAt: 'chart-container',
width: '450',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"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"
}
]
}
]
}
});
chartObj.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:
FusionCharts will load here..
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:
FusionCharts will load here..
Click here to edit the above stacked column 2D chart.
Show Percent Values in Tooltips
By default, actual data values are rendered in tool-tips. Set the showPercentInToolTip to 1 to show the percentage values in tooltips.
Refer to the code given below:
{
"chart": {
"showPercentInTooltip": "1"
},
}A stacked column chart configured to show percent values in tooltips looks like this:
FusionCharts will load here..
Click here to edit the above stacked column 2D chart.