StackedAreaSeriesView Class

Displays series data points as the Stacked Area chart.

Assembly: DevExpress.WinUI.Charts.v21.1.dll

Declaration

C#
VB.NET

public class StackedAreaSeriesView :
    MarkerSeriesView

Public Class StackedAreaSeriesView
    Inherits MarkerSeriesView

Remarks

The Stacked Area series aggregate data points with the same argument.

Define the Series.View property to assign a specific view to the series.

Example

The following example shows how to create a Stacked Area chart:

XAML

<Page
    x:Class="CartesianChartSample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:CartesianChartSample"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Charts="using:DevExpress.WinUI.Charts"
    xmlns:dx="using:DevExpress.WinUI.Controls.Core"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Page.DataContext>
        <local:ChartViewModel/>
    </Page.DataContext>
    <Grid>
        <Charts:CartesianChart x:Name="chart">
            <Charts:CartesianChart.Legend>
                <Charts:Legend HorizontalPosition="Center" VerticalPosition="BottomOutside"/>
            </Charts:CartesianChart.Legend>
            <Charts:CartesianChart.Series>
                <Charts:Series x:Name="series1" DisplayName="2020">
                    <Charts:Series.View>
                        <Charts:StackedAreaSeriesView ShowLabels="True" Brush="CornflowerBlue">
                            <Charts:StackedAreaSeriesView.LabelOptions>
                                <Charts:SeriesLabelOptions Pattern="{}{V:f1}"/>
                            </Charts:StackedAreaSeriesView.LabelOptions>
                        </Charts:StackedAreaSeriesView>
                    </Charts:Series.View>
                    <Charts:Series.Data>
                        <Charts:DataSourceAdapter DataSource="{Binding SeriesData1}">
                            <Charts:DataMember DataMemberType="Argument" ColumnName="CompanyName" />
                            <Charts:DataMember DataMemberType="Value" ColumnName="MarketValue" />
                        </Charts:DataSourceAdapter>
                    </Charts:Series.Data>
                </Charts:Series>
                <Charts:Series x:Name="series2" DisplayName="2019">
                    <Charts:Series.View>
                        <Charts:StackedAreaSeriesView ShowLabels="True" Brush="Coral">
                            <Charts:StackedAreaSeriesView.LabelOptions>
                                <Charts:SeriesLabelOptions Pattern="{}{V:f1}"/>
                            </Charts:StackedAreaSeriesView.LabelOptions>
                        </Charts:StackedAreaSeriesView>
                    </Charts:Series.View>
                    <Charts:Series.Data>
                        <Charts:DataSourceAdapter DataSource="{Binding SeriesData2}">
                            <Charts:DataMember DataMemberType="Argument" ColumnName="CompanyName" />
                            <Charts:DataMember DataMemberType="Value" ColumnName="MarketValue" />
                        </Charts:DataSourceAdapter>
                    </Charts:Series.Data>
                </Charts:Series>
            </Charts:CartesianChart.Series>
        </Charts:CartesianChart>
    </Grid>
</Page>

using DevExpress.Mvvm;
using DevExpress.WinUI.Charts;
using Microsoft.UI.Xaml.Controls;
using System;
using System.Collections.Generic;

namespace CartesianChartSample {
    public sealed partial class MainPage : Page {
        public MainPage() {
            this.InitializeComponent();
        }
    }
    public class DataPoint {
        public string CompanyName { get; set; }
        public double MarketValue { get; set; }
    }

    public class ChartViewModel : ViewModelBase {
        public ChartViewModel() {
            List<DataPoint> seriesData1 = new List<DataPoint> {
                new DataPoint() { CompanyName = "Apple", MarketValue = 2254.000 },
                new DataPoint() { CompanyName = "Amazon", MarketValue = 1634.000 },
                new DataPoint() { CompanyName = "Microsoft", MarketValue = 1682.000 },
                new DataPoint() { CompanyName = "Facebook", MarketValue = 776.590 },
                new DataPoint() { CompanyName = "Alphabet", MarketValue = 1185.000 },
                new DataPoint() { CompanyName = "Tencent", MarketValue = 683.470 }
            };
            List<DataPoint> seriesData2 = new List<DataPoint> {
                new DataPoint() { CompanyName = "Apple", MarketValue = 1305.000 },
                new DataPoint() { CompanyName = "Amazon", MarketValue = 916.150 },
                new DataPoint() { CompanyName = "Microsoft", MarketValue = 1203.000 },
                new DataPoint() { CompanyName = "Facebook", MarketValue = 585.320 },
                new DataPoint() { CompanyName = "Alphabet", MarketValue = 922.130 },
                new DataPoint() { CompanyName = "Tencent", MarketValue = 461.370 }
            };
            SeriesData1 = seriesData1;
            SeriesData2 = seriesData2;
        }
        public List<DataPoint> SeriesData1 { get; }
        public List<DataPoint> SeriesData2 { get; }
    }
}

For step-by-step instructions on how to create a Cartesian chart, refer to the following help topic: Lesson 1 - Create a Cartesian Chart.