Stacked Charts

Overview
Marimekko Charts
Value Stacking
Percent Stacking
Combination
Supported Types

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 also 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.

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.

Value Stacking

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

// create a chart
var 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
var 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 percent symbol to axis labels use Axes Labels formatting:

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

Tooltips and Labels

To add percent symbol and show percentage instead (or in addition to) in tooltips and labels 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
var 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

Supported Types

Here is the list of supported stacked charts:

Marimekko charts are a special case of stacked charts: