Still have questions?
Contact support

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

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:

JsFiddle 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:

JsFiddle 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);

JsFiddle 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 in case of two scales:

// sync minimums and maximums of the scales
if (yScale1.maximum() > yScale2.maximum())
    yScale2.maximum(yScale1.maximum());
else
    yScale1.maximum(yScale2.maximum());


if (yScale1.minimum() < yScale2.minimum())
    yScale2.minimum(yScale1.minimum());
else
    yScale1.minimum(yScale2.minimum());

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

JsFiddle 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);

JsFiddle 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);

JsFiddle Playground

Supported Series Samples