Stacked Line/Spline Charts

Overview

Data that is arranged in columns or rows on a worksheet can be plotted in an area chart. Area charts are good at emphasizing the magnitude of changes over time, as well as at drawing attention to the total value across a trend.

Stacked area charts are multi-series area charts that display the trend each value contribute over time or categories.

Chart

As stacked charts should show contribution of different components to the total, we will demonstrate them on sales of an imaginable ACME FastFood, Corp. Let's assume that it sells Ice Creams, Chocolate Bars and Coke all through the year.

So, now we've got three series of data - one series for each product. Let's define categories as seasons of a year.

  var dataSet = anychart.data.set([
["Winter", 12000, 12000, 10000],
["Spring", 13000, 12000, 17000],
["Summer", 25000, 15000, 19000],
["Autumn", 16000, 16000, 16000]
  ]);

Now we have to tell Y-Axis to display these series in a stacked area:

  chart.yScale().stackMode('value');

And set "Area" as a default series type:

  chart = anychart.area();

JsFiddle Playground

Spline Stacked Area

This type of area chart makes your data look a bit more attractive: points and angles are replaced with a single spline. Just change default series type to "SplineArea" and get your data displayed in a more appealing way. Just change default series type to "SplineArea" and get your data displayed in more appealing way:

chart.splineArea(seriesData_1);
XML Syntax XML Code Plain code 01 02 03
<format><![CDATA[{%SeriesName} - {%Value}$ - {%YPercentOfCategory}{numDecimals:2}%]]></format> 
04
05
–> Here is a sample spline stacked area chart:

JsFiddle Playground

Step Stacked Area

Just change default series type to "stepArea" and get your data displayed in more comparable way:

  chart.stepArea(seriesData_1);

Here is a sample html5 step stacked area chart:

JsFiddle Playground

3D Series

Along with common area charts you can use 3D mode for displaying your area charts. Use .area3d() method to enable area 3D mode.

var chart = anychart.area3d();

JsFiddle Playground

You are looking at an outdated 7.11.0 version of this document. Switch to the 8.0.1 version to see the up to date information.