AnyChart Documentation
Still have questions?
Contact support
Still have questions?
Contact support

© 2024 AnyChart.Com All rights reserved.

Stacked Charts

Overview

The stacked charts are a popular visual aid used for categorizing and comparing the parts of a whole. Each element in the chart represents a whole, and the segments represent parts of that whole. Different colors used for the segments distinguish the categories. Stacked charts are otherwise known as stacked graphs.

In AnyChart stacking is a special mode of a Scale set by stackMode() method, and several types of series are compatible with this mode. If a series can not be stacked it simply ignores the mode.

There are two modes of stacking: value and percent. These article explains everything there is to know about stacking settings and options.

Value Stacking

To create a value stacked chart you need to set scale stackMode to "value":

// create a chart
chart = anychart.column();

/* enable the value stacking mode
on the default primary value scale*/
chart.yScale().stackMode("value");

Here is a basic sample of a stacked column chart:

Playground

Percent Stacking

To create a percent stacked chart you need to set scale stackMode to "percent":

// create a chart
chart = anychart.column();

/* enable the percent stacking mode
on the default primary value scale*/
chart.yScale().stackMode("percent");

Percent stacked charts usually need some fine tuning to get going:

Scale Interval

Setting scale to percent stacked mode will force it's minimum and maximum to 0 and 100 but tick interval will remain auto-calculated. If you want to change interval use ticks interval settings:

/* enable the value stacking mode
on the default primary value scale*/
chart.yScale().stackMode("value");

// set the tick interval on the value scale
chart.yScale().ticks().interval(20);

Axis Percent Labels

To add the percent symbol to axis labels, use Axes Labels formatting:

// configure labels on the y-axis
chart.yAxis().labels().format("{%value}%");

Labels and Tooltips

To add the percent symbol to labels and tooltips, use Text Formatters:

// configure tooltips
chart.tooltip().format("{%yPercentOfCategory}%");

Here is a sample percent stacked chart with all typical settings put together:

Playground

Combination

Clustered

With column, bar or stick series types it is possible to create so-called "clustered stacks". To do so you should create a scale for each stacked cluster and assign it to series in this cluster. You also need to take care of axes manually in this case.

Here us a sample of percent stacked clustered chart:

// create scales and set stacking modes
var yScale1 = anychart.scales.linear();
yScale1.stackMode("percent");

var yScale2 = anychart.scales.linear();
yScale2.stackMode("percent");

var yScale3 = anychart.scales.linear();
yScale3.stackMode("percent");

// create column series and bind them to different scales:
chart.column(seriesData_1).yScale(yScale1);
chart.column(seriesData_2).yScale(yScale1);

chart.column(seriesData_3).yScale(yScale2);
chart.column(seriesData_4).yScale(yScale2);

chart.column(seriesData_5).yScale(yScale3);
chart.column(seriesData_6).yScale(yScale3);

Playground

If you do this with value stacking mode you should not forget about minimum and maximum auto-calculation and sync axes. The easiest way is to set the same values to minimums and maximums:

// create scales and set stacking modes
// set maximums and minimums
yScale1 = anychart.scales.linear();
yScale1.stackMode("value");
yScale1.maximum(20);
yScale1.minimum(0);

yScale2 = anychart.scales.linear();
yScale2.stackMode("percent");
yScale2.maximum(20);
yScale2.minimum(0);

But you can also sync scales after they auto-calculate their minimums and maximums, it can be done like that:

// sync minimums and maximums of the scales
globalMax = chart.getStat("yScalesMax");
globalMin = chart.getStat("yScalesMin");
// get all y scales
var yScales = chart.getYScales();
// set the same minimum and maximum
for (var i = 0; i < yScales.length; i++) {
   yScales[i].minimum(globalMin);
   yScales[i].maximum(globalMax);
}

Here is a sample of clustered value stacked column chart with synced scales:

Playground

Overlay

If you want to display several stacks of different type at once you have to create a scale for each stack and properly link series from each stack to a scale. You also need to take care of axes manually in this case.

// create a chart
chart = anychart.column();

// create scales and set stacking modes
yScale1 = anychart.scales.linear();
yScale1.stackMode("percent");

yScale2 = anychart.scales.linear();
yScale2.stackMode("percent");

// create area and column series
//bind them to different scales:
chart.area(seriesData_1).yScale(yScale1);
chart.area(seriesData_2).yScale(yScale1);

chart.column(seriesData_3).yScale(yScale2);
chart.column(seriesData_4).yScale(yScale2);

Playground

With Unstackable Series

When you combine a set of stackable series with any number of series if unstackable type the stackable series form a stack and unstackable series are displayed as always. This way you can show a trend over a stack without creating any extra scales. Please see a sample below:

/* enable the value stacking mode
on the default primary value scale*/
chart.yScale().stackMode("value");

// create column and line series
chart.column(seriesData_1);
chart.column(seriesData_2);
chart.line(seriesData_3);

Playground

Stacking Order

You can change the order of stacking using the stackDirection() method:

yScale().stackMode("value");

// Set the stacking direction.
yScale().stackDirection("reverse")

Here is a sample that shows both stacking order directions"

Playground

Supported Types

Here is the list of supported stacked charts:

Here are vertical and 3D stacked charts:

See also polar and radar stacked charts:

Marimekko Charts

Marimekko charts are a special type of stacked charts and though very similar, still are different. Please refer to Marimekko Chart articles to learn how to build them with AnyChart.