---
title: Stacked Area Series View
order: 690
seealso: []
---
# Stacked Area Series View
Stacked Area Series Views (`CartesianStackedAreaSeriesView`) allow you to show absolute relationships between two or more data series. Each Stacked Area Series is rendered as a filled area stacked on top of the previous Stacked Area Series. The series' thickness is determined by absolute values of data points. The top line shows the cumulative total of all Stacked Area Series in the chart control.
If all Stacked Area Series in the chart control only have negative values, the series are arranged in the direction of the negative _Y_ axis. In this case, the bottom line shows the cumulative total:
- Use Stacked Area Series Views to show only positive or only negative data in the same chart control.
- If any Stacked Area Series contains a mix of positive and negative values, all negative values are treated as zeroes.
## Create Stacked Area Series Views
You typically use the Stacked Area Series presentation to show absolute relationships between two or more data series. Steps to create a Stacked Area chart include:
1. Create a `CartesianSeries` object for each data series and add it to the `CartesianChart.Series` collection.
2. Set the `CartesianSeries.View` property to a `CartesianStackedAreaSeriesView` object.
3. Use the `CartesianSeries.DataAdapter` property to supply data for the series.
The following code snippets show how to create a Stacked Area chart consisting of two data series in XAML and code-behind.
``` xml
xmlns:mxc="https://schemas.eremexcontrols.net/avalonia/charts"
```
``` cs
double[] args = new double[] { 1, 2, 3, 4, 5};
double[] values1 = new double[] { 3, 2, 1, 2, 4 };
double[] values2 = new double[] { 1, 2, 1, 2, 2 };
CartesianSeries series1 = new CartesianSeries();
series1.DataAdapter = new SortedNumericDataAdapter(args, values1);
series1.View = new CartesianStackedAreaSeriesView()
{
Color = Color.FromUInt32(0xffDF3C5F),
Transparency = 0.6,
ShowMarkers = true,
MarkerSize = 5
};
CartesianSeries series2 = new CartesianSeries();
series2.DataAdapter = new SortedNumericDataAdapter(args, values2);
series2.View = new CartesianStackedAreaSeriesView()
{
Color = Color.FromUInt32(0xff6F9BD1),
Transparency = 0.6,
ShowMarkers = true,
MarkerSize = 5
};
chartControl.Series.Add(series1);
chartControl.Series.Add(series2);
```
The result is shown below:
### Example - Create a Stacked Area Chart Using the MVVM Design Pattern
The following example creates three series of the Stacked Area type from a View Model.
- The `CartesianChart.SeriesSource` property is bound to the _SeriesCollection_ property in the View Model. This collection is a source of _SeriesViewModel_ objects used to initialize individual series in the Chart control.
- The `CartesianChart.SeriesTemplate` property is set to a template that creates a series (a `CartesianSeries` object) of the Stacked Area type from each _SeriesViewModel_ object. The series data, title and color are determined by the _SeriesViewModel.DataAdapter_, _SeriesViewModel.Title_, and _SeriesViewModel.Color_ properties, respectively.
``` xml
```
``` cs
// MainWindow.axaml.cs
using ChartStackedAreaSeriesViewExample.ViewModels;
using Eremex.AvaloniaUI.Controls.Common;
namespace ChartStackedAreaSeriesViewExample.Views;
public partial class MainWindow : MxWindow
{
public MainWindow()
{
InitializeComponent();
this.DataContext = new MainWindowViewModel();
}
}
```
``` cs
// MainWindowViewModel.cs
using Avalonia.Media;
using CommunityToolkit.Mvvm.ComponentModel;
using Eremex.AvaloniaUI.Charts;
using System;
using System.Collections.ObjectModel;
namespace ChartStackedAreaSeriesViewExample.ViewModels;
public partial class MainWindowViewModel : ObservableObject
{
[ObservableProperty]
ObservableCollection seriesCollection = new();
[ObservableProperty] FuncLabelFormatter argsLabelFormatter = new(o => String.Format("{0:n0}", o));
public MainWindowViewModel()
{
double[] args = new double[] { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 };
double[] values1 = new double[] { 10, 15, 20, 18, 10, 8, 12, 14, 15, 20, 17, 20 };
double[] values2 = new double[] { 10, 5, 5, 10, 20, 18, 17, 15, 20, 25, 27, 30 };
double[] values3 = new double[] { 15, 10, 15, 25, 22, 20, 15, 17, 20, 20, 15, 20 };
SeriesCollection.Add(new SeriesViewModel { Title = "Europe", Color = Color.FromUInt32(0xFF9B59B6), DataAdapter = new SortedNumericDataAdapter(args, values1) });
SeriesCollection.Add(new SeriesViewModel { Title = "Africa", Color = Color.FromUInt32(0xFFE74C3C), DataAdapter = new SortedNumericDataAdapter(args, values2) });
SeriesCollection.Add(new SeriesViewModel { Title = "Asia", Color = Color.FromUInt32(0xFFF39C12), DataAdapter = new SortedNumericDataAdapter(args, values3) });
}
}
public partial class SeriesViewModel : ObservableObject
{
[ObservableProperty] string title;
[ObservableProperty] Color color;
[ObservableProperty] ISeriesDataAdapter dataAdapter;
}
```
## Data for the Stacked Area Series View
You can use the following data adapters to provide data for Stacked Area Series Views:
Numeric _X_ Values:
- `SortedNumericDataAdapter`
- `FormulaDataAdapter`
Date and Time _X_ Values:
- `SortedDateTimeDataAdapter`
- `SortedTimeSpanDataAdapter`
Qualitative _X_ Values:
- `QualitativeDataAdapter`
## Stacked Area Series View Settings
- `Color` — Specifies the color used to paint the series.
- `CrosshairMode` — Specifies whether the crosshair's chart label snaps to the nearest data point, or displays an interpolated value. See [Show an Exact or Interpolated Value in Crosshair Chart Labels](../crosshair.md#show-an-exact-or-interpolated-value-in-crosshair-series-labels).
- `MarkerImage` — Gets or sets an image to use as custom point markers. If no image is specified, default square-shaped markers are displayed. You can use an `SvgImage` class instance to specify an SVG image.
The `MarkerImage` property is declared with the `[Content]` attribute, which allows you to define an image directly between the <CartesianStackedAreaSeriesView> tags.
``` xml
```
SVG files contain predefined colors for SVG elements. To make these colors match your data series color, you can either:
- Manually edit the source SVG image file beforehand
- Use the `MarkerImageCss` property to dynamically customize [styles](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/style) for SVG elements. The styles are applied when point markers are rendered.
- `MarkerImageCss` — Specifies [CSS styles](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/style) for runtime customization of an SVG image defined by the `MarkerImage` property. The primary use case is replacing SVG element colors with the series color (`Color`). Include the `{0}` placeholder to insert the value of the `Color` property in the CSS code.
For example, when the `MarkerImage` property contains an SVG image with a circle element, the following CSS code styles the `circle` with an Orange fill (using the series color) and Dark Red border:
``` xml
```
See also: [Example - Create a Lollipop Series View and Use Custom SVG Markers](lollipop-series-view.md#example-create-a-lollipop-series-view-and-use-custom-svg-data-point-markers).
- `MarkerSize` — Specifies the size of point markers.
- `ShowInCrosshair` — Specifies the visibility of the crosshair chart label for the current series. See [Customize Chart Labels of the Crosshair](../crosshair.md#hide-a-series-in-the-crosshair).
- `ShowMarkers` — Enables or disables point markers.
- `Thickness` — Specifies the line thickness.
- `Transparency` — A value between `0` and `1` which specifies the transparency level of filled areas:
- `0` means fully opaque
- `1` means fully transparent