Loading
Configuring a Stacked Chart
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:
Given below is a brief description of the attribute used to display the cumulative sum:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether the sum of all stacked data plots will be shown. Setting this attribute to |
The data structure needed to show the cumulative sum of stacked data is given below:
{
"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"
}
]
}
]
}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:
Given below is a brief description of the attributes used to render a 100% stacked chart:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether a 100% stacked chart will be rendered. Setting this attribute to |
|
It is used to specify the number of digits that will be rendered after the decimal point for a data value. |
The data structure needed to create a 100% stacked chart is given below:
{
"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"
}
]
}
]
}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:
Given below is a brief description of the attributes used to show percent values in tool-tips:
| Attribute Name | Description |
|---|---|
|
It is used to specify whether percent values will be rendered in the tool-tip. Setting this attribute to |
|
It is used to specify whether actual data values will be rendered on the data plots. Setting this attribute to |
|
It is used to specify whether percent values will be rendered on the data plots. Setting this attribute to If the |
The data structure needed to render percent values in tool-tips is given below:
{
"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"
}
]
}
]
}There! You have now seen how you can configure stacked charts.