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:

FusionCharts should load here..

Given below is a brief description of the attribute used to display the cumulative sum:

Attribute Name Description
showSum It 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.

The data structure needed to show the cumulative sum of stacked data is given below:

...

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:

FusionCharts should load here..

Given below is a brief description of the attributes used to render a 100% stacked chart:

Attribute Name Description
stack100Percent It is used to specify whether a 100% stacked chart will be rendered. Setting this attribute to 1 will render a 100% stacked chart, setting it to 0 (default) will render a normal stacked chart.
decimals 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:

...

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:

FusionCharts should load here..

Given below is a brief description of the attributes used to show percent values in tool-tips:

Attribute Name Description
showPercentInTooltip It is used to specify whether percent values will be rendered in the tool-tip. Setting this attribute to 1 will render percent values in tool-tips, setting it to 0 (default) will render actual values.
showValues It is used to specify whether actual data values will be rendered on the data plots. Setting this attribute to 1 will render the data values, setting it to 0 (default) will hide them.
showPercentValues It is used to specify whether percent values will be rendered on the data plots. Setting this attribute to 1 will render the percent values, setting it to 0 (default) will hide them. If the showValues and the showPercentValues attributes are set to 1, the latter overrides the former.

The data structure needed to render percent values in tool-tips is given below:

...

There! You have now seen how you can configure stacked charts.