AreaSeriesView Class

Displays series data points as an Area chart.

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

Declaration

C#
VB.NET

public class AreaSeriesView :
    MarkerSeriesView

Public Class AreaSeriesView
    Inherits MarkerSeriesView

Remarks

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

Example

The following example shows how to create an Area chart:

Area chart example

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" ToolTipEnabled="True">
            <Charts:CartesianChart.Series>
                <Charts:Series x:Name="seriesDevAVNorth" DisplayName="Sales (DevAV North)">
                    <Charts:Series.View>
                        <Charts:AreaSeriesView ToolTipPointPattern="{}{A:MMMM, d}: {V:f2}K" 
                                               ToolTipSeriesPattern="{}{S}" 
                                               ShowMarkers="True" 
                                               ShowContour="True" 
                                               Brush="Coral" 
                                               Transparency="50">
                            <Charts:AreaSeriesView.ContourAppearance>
                                <Charts:ContourAppearance Brush="OrangeRed">
                                    <Charts:ContourAppearance.StrokeStyle>
                                        <dx:StrokeStyle DashArray="4 2" Thickness="4"/>
                                    </Charts:ContourAppearance.StrokeStyle>
                                </Charts:ContourAppearance>
                            </Charts:AreaSeriesView.ContourAppearance>
                        </Charts:AreaSeriesView>
                    </Charts:Series.View>
                    <Charts:Series.Data>
                        <Charts:DataSourceAdapter DataSource="{Binding DataPoints}">
                            <Charts:DataMember DataMemberType="Argument" ColumnName="Date" />
                            <Charts:DataMember DataMemberType="Value" ColumnName="Total" />
                        </Charts:DataSourceAdapter>
                    </Charts:Series.Data>
                </Charts:Series>
            </Charts:CartesianChart.Series>
            <Charts:CartesianChart.Legend>
                <Charts:Legend HorizontalPosition="Center" VerticalPosition="BottomOutside"/>
            </Charts:CartesianChart.Legend>
            <Charts:CartesianChart.AxisX>
                <Charts:AxisX ShowLabels="True">
                    <Charts:AxisX.LabelOptions>
                        <Charts:AxisLabelOptions Pattern="{}{V:MMMM}" Angle="20" FontSize="10"/>
                    </Charts:AxisX.LabelOptions>
                </Charts:AxisX>
            </Charts:CartesianChart.AxisX>
            <Charts:CartesianChart.AxisY>
                <Charts:AxisY ShowLabels="True">
                    <Charts:AxisY.LabelOptions>
                        <Charts:AxisLabelOptions Pattern="${V}K"/>
                    </Charts:AxisY.LabelOptions>
                </Charts:AxisY>
            </Charts:CartesianChart.AxisY>
        </Charts:CartesianChart>
    </Grid>
</Page>

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

namespace CartesianChartSample
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }
    }
    public class DataPoint
    {
        public DateTime Date { get; set; }
        public double Total { get; set; }
    }
    public class ChartViewModel : ViewModelBase
    {
        public ChartViewModel()
        {
            List<DataPoint> dataPoints = new List<DataPoint> {
                new DataPoint() { Date = new DateTime(2020, 01, 01), Total = 396.45 },
                new DataPoint() { Date = new DateTime(2020, 02, 01), Total = 496.253 },
                new DataPoint() { Date = new DateTime(2020, 03, 01), Total = 536.45 },
                new DataPoint() { Date = new DateTime(2020, 04, 01), Total = 539.632 },
                new DataPoint() { Date = new DateTime(2020, 05, 01), Total = 634.42 },
                new DataPoint() { Date = new DateTime(2020, 06, 01), Total = 645.637 },
                new DataPoint() { Date = new DateTime(2020, 07, 01), Total = 696.1 },
                new DataPoint() { Date = new DateTime(2020, 08, 01), Total = 701.756 },
                new DataPoint() { Date = new DateTime(2020, 09, 01), Total = 782.822 }
            };
            DataPoints = dataPoints;
        }
        public List<DataPoint> DataPoints { 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.