Stacked Line/Spline/StepLine Chart


Data that is arranged in columns or rows on a worksheet can be plotted in an area chart. Area charts emphasize the magnitude of change over time, and can be used to draw attention to the total value across a trend.

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

to top

Chart Building

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

So, we have three series of data - one series for each product, and we give proper names to each series:

XML Syntax
Plain code
01 <data>
02   <series name="Ice Cream">
03     <point name="Winter" y="12000" />
04     <point name="Spring" y="13000" />
05     <point name="Summer" y="25000" />
06     <point name="Autumn" y="16000" />
07   </series>
08   <series name="Chocolate Bars">
09     <point name="Winter" y="12000" />
10     <point name="Spring" y="12000" />
11     <point name="Summer" y="15000" />
12     <point name="Autumn" y="16000" />
13   </series>
14   <series name="Coke">
15     <point name="Winter" y="10000" />
16     <point name="Spring" y="17000" />
17     <point name="Summer" y="19000" />
18     <point name="Autumn" y="16000" />
19   </series>
20 </data>

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

XML Syntax
Plain code
01 <axes>
02   <y_axis>
03     <scale mode="Stacked" />
04   </y_axis>
05 </axes>

And set "Area" as a default series type:

XML Syntax
Plain code
01 <data_plot_settings default_series_type="Area" />

Everything is ready, here is a sample stacked area chart:

Live Sample:  Sample Stacked Area Chart

to top

Spline Stacked Area

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

XML Syntax
Plain code
01 <data_plot_settings default_series_type="SplineArea" />

Also, let's add area tooltips and make them more informative, to that we will change their format:

XML Syntax
Plain code
01 <area_series>
02   <tooltip_settings enabled="true">
03     <format><![CDATA[{%SeriesName} - {%Value}$ - {%YPercentOfCategory}{numDecimals:2}%]]></format>
04   </tooltip_settings>
05 </area_series>

Here is a sample spline stacked area chart:

Live Sample:  Sample Stacked Spline Area Chart

to top


to top