Stacking: String;
The Stacking property determines type of chart stacking.
Use JSON to set the property value and the getStacking method to get the property value.
Available values:
Absolute. The chart shows stacking value allowing to estimate share of each value in the total.
None. The chart shows series absolute values (default).
Percent. The chart shows values as percentage allowing to assess part of each value in the total sum.
To execute the example, the HTML page must contain the Chart component named chart (see Example of Creating a Histogram). Remove the histogram, create a new stacked histogram, recalculate stacking values, and then show some of the calculated values in the browser console:
// Delete the chart
chart.dispose();
// Create arrays of values for data series
var data0 = [10, 20, 30, 40, 50];
var data1 = [20, 30, 40, 50, 60];
var data2 = [30, 40, 50, 60, 70];
var data3 = [40, 50, 60, 70, 80];
var data4 = [50, 60, 70, 80, 90];
// Create array that contains color values
var colors = ["rgb(192,217,253)", "rgb(163,200,252)", "rgb(134,183,251)",
"rgb(96,161,250)", "rgb(192,142,204)", "rgb(192,107,188)"
];
// Create a new stacked chart
chart = chart = new PP.Ui.Chart({
Width: 500, // Chart width
Height: 500, // Chart height
ParentNode: "chart", // Parent item
Type: "Column", // Chart type
Stacking: "Absolute",
// Data series
"Series": [{ // Series 1
"Name": "Australia", // Series name
"Data": data0, // Array of values
"Color": colors[0], // Color
"LineColor": colors[1], // Lines color
"LineWidth": 4 // Lines width
}, { // Series 2
"Name": "Asia",
"Data": data1,
"Color": colors[1],
"LineColor": colors[2],
"LineWidth": 4
}, { // Series 3
"Name": "Africa",
"Data": data2,
"Color": colors[2],
"LineColor": colors[3],
"LineWidth": 4
}, { // Series 4
"Name": "Europe",
"Data": data3,
"Color": colors[3],
"LineColor": colors[4],
"LineWidth": 4
}, { // Series 5
"Name": "N. America",
"Data": data4,
"Color": colors[4],
"LineColor": colors[5],
"LineWidth": 4
}],
// Category axis
"XAxis": {
"Categories": ["2001", "2002", "2003", "2004", "2005"], // Array of categories
"Labels": {
"Enabled": true
} // Label settings
},
// Value axis
"YAxis": {
"Labels": {
"Enabled": true
} // Label settings
},
// Secondary value axis
"YSAxis": {
"Enabled": false // Indicates whether the axis is active
},
// Chart plot area
"PlotArea": {},
// Chart legend
"Legend": {},
// Chart title
"Title": {
"Text": "Chart"
}
});
// Remove the legend
chart.getLegend().dispose();
// Recalculate chart stacks
chart.getSeriesStacks("column");
// Get calculated values of chart stacks
var stackExtrems = chart.getStackExtrems();
// In the browser console show calculated value for the first point in the X axis
console.log("Sum of values for the category " + chart.getXAxis().getCategories()[0] + ": " + stackExtrems.Primary[0].sum);
// In the browser console show values of max and min fields in the Primary array
var primary = stackExtrems.Primary;
console.log("Maximum value: " + primary.max);
console.log("Minimum value: " + primary.min);
After executing the example a new stacked histogram is displayed in the screen:
The browser console displays the sum of values for the category 2001, and also maximum and minimum values of data series accounting for stacked values:
Sum of values for the category 2001: 150
Maximum value: 350
Minimum value: 10
See also: