---
title: Full-Stacked Area Series View
order: 680
seealso: []
---
# Full-Stacked Area Series View
Full-Stacked Area Series Views (100% Stacked Area charts) are used to show proportional relationships between two or more data series. Each Full-Stacked Area Series is rendered as a filled area stacked on top of the previous Full-Stacked Area Series. The series' thickness is determined by its percentage contribution to the total. The top line always corresponds to `100%`.
If all Full-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 indicates `-100%`.
- Use Full-Stacked Area Series Views to show only positive or only negative data in the same chart control.
- If any Full-Stacked Area Series contains a mix of positive and negative values, all negative values are treated as zeroes.
The Full-Stacked Area Series View is encapsulated by the `CartesianFullStackedAreaSeriesView` class.
## Create Full-Stacked Area Series Views
You typically use the Full-Stacked Area Series presentation to show proportional relationships between two or more data series. Steps to create a Full-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 `CartesianFullStackedAreaSeriesView` object.
3. Use the `CartesianSeries.DataAdapter` property to supply data for the series.
4. Format Y-axis values as a percentage by customizing the scale options of the Y axis.
In the Full-Stacked Area Series View, the calculated Y-axis values (and so labels) are in the range between 0 and 1. To display these values as percentages (0%-100%) along the Y axis and in Crosshair labels, set the `ScaleOptions.LabelFormatter` and `ScaleOptions.CrosshairLabelFormatter` properties to a `PercentLabelFormatter` object (or a custom `IAxisLabelFormatter` object). See the example below.
The following code snippets show how to create the Full-Stacked Area chart consisting of three 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 };
double[] values3 = new double[] { 2, 1, 2, 3, 2 };
CartesianSeries series1 = new CartesianSeries();
series1.DataAdapter = new SortedNumericDataAdapter(args, values1);
series1.View = new CartesianFullStackedAreaSeriesView()
{
Color = Color.FromUInt32(0xff07575b),
Transparency = 0.5,
ShowMarkers = true,
MarkerSize = 3
};
CartesianSeries series2 = new CartesianSeries();
series2.DataAdapter = new SortedNumericDataAdapter(args, values2);
series2.View = new CartesianFullStackedAreaSeriesView()
{
Color = Color.FromUInt32(0xff763626),
Transparency = 0.5,
ShowMarkers = true,
MarkerSize = 3
};
CartesianSeries series3 = new CartesianSeries();
series3.DataAdapter = new SortedNumericDataAdapter(args, values3);
series3.View = new CartesianFullStackedAreaSeriesView()
{
Color = Color.FromUInt32(0xfffc913a),
Transparency = 0.5,
ShowMarkers = true,
MarkerSize = 3
};
AxisY axisY = new AxisY();
axisY.Title = "Income";
// Format Y values as percentage
axisY.ScaleOptions = new NumericScaleOptions()
{
LabelFormatter = new PercentLabelFormatter(),
CrosshairLabelFormatter = new PercentLabelFormatter()
};
chartControl.AxesY.Add(axisY);
chartControl.Series.Add(series1);
chartControl.Series.Add(series2);
chartControl.Series.Add(series3);
```
The result is shown below:
### Example - Create a Full-Stacked Area Chart Using the MVVM Design Pattern
The following example creates three series of the Full-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 Full-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.
- The `ScaleOptions.LabelFormatter` and `ScaleOptions.CrosshairLabelFormatter` properties are set to a `PercentLabelFormatter` object to format Y-axis values as percentages.
``` 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, 20, 17, 15, 20, 25, 27, 30 };
double[] values3 = new double[] { 15, 10, 15, 25, 20, 22, 15, 17, 20, 20, 15, 20 };
SeriesCollection.Add(new SeriesViewModel { Title = "Summit Mountain Logistics", Color = Color.FromUInt32(0xFFDB643B), DataAdapter = new SortedNumericDataAdapter(args, values1) });
SeriesCollection.Add(new SeriesViewModel { Title = "Heartland Distribution", Color = Color.FromUInt32(0xFFEBB443), DataAdapter = new SortedNumericDataAdapter(args, values2) });
SeriesCollection.Add(new SeriesViewModel { Title = "Intercontinental Dispatch", Color = Color.FromUInt32(0xFF6DA0A4), DataAdapter = new SortedNumericDataAdapter(args, values3) });
}
}
public partial class SeriesViewModel : ObservableObject
{
[ObservableProperty] string title;
[ObservableProperty] Color color;
[ObservableProperty] ISeriesDataAdapter dataAdapter;
}
```
## Data for the Full-Stacked Area Series View
You can use the following data adapters to provide data for Full-Stacked Area Series Views:
Numeric _X_ Values:
- `SortedNumericDataAdapter`
- `FormulaDataAdapter`
Date and Time _X_ Values:
- `SortedDateTimeDataAdapter`
- `SortedTimeSpanDataAdapter`
Qualitative _X_ Values:
- `QualitativeDataAdapter`
## Full-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 <CartesianFullStackedAreaSeriesView> 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