How to: Create a 2D Area Chart

Jul 16, 2019
4 minutes to read

This example describes how to create a 2D Area chart.

Create a ChartControl and set its ChartControl.Diagram property to a XYDiagram2D object.
Specify the Diagram.SeriesItemsSource property to bind a collection of objects used to generate series.
To enable series markers, use the AreaSeries2D.MarkerVisible property. The AreaSeries2D.MarkerSize property allows you to set the marker size. To specify the model used to draw markers, use the AreaSeries2D.MarkerModel property.
Add an Title to the ChartControlBase.Titles collection. Define the title’s Content and HorizontalAlignment properties. Refer to the Chart Titles topic for more information about titles.
Use the following API members to configure the axis options.

Window1.xaml
Window1.xaml.cs
Window1.xaml.vb

xaml

<Window x:Class="Area2DChart.Window1" 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts" 
        xmlns:local="clr-namespace:Area2DChart"
        Title="Window1" Height="420" Width="690">
    <Window.DataContext>
        <local:ChartViewModel/>
    </Window.DataContext>
    <Grid>
        <dxc:ChartControl>
            <dxc:ChartControl.Titles>
                <dxc:Title Content="Outside Vendor Costs" HorizontalAlignment="Center"/>
            </dxc:ChartControl.Titles>
            <dxc:XYDiagram2D SeriesItemsSource="{Binding Data}">
                <dxc:XYDiagram2D.SeriesItemTemplate>
                    <DataTemplate>
                        <dxc:AreaSeries2D DisplayName="{Binding Name}" 
                                          DataSource="{Binding Values}"
                                          ArgumentDataMember="Argument"
                                          ValueDataMember="Value" 
                                          Transparency="0.5" 
                                          MarkerVisible="True"
                                          MarkerSize="10">
                            <dxc:AreaSeries2D.MarkerModel>
                                <dxc:CircleMarker2DModel/>
                            </dxc:AreaSeries2D.MarkerModel>
                        </dxc:AreaSeries2D>
                    </DataTemplate>
                </dxc:XYDiagram2D.SeriesItemTemplate>
                <dxc:XYDiagram2D.AxisX>
                    <dxc:AxisX2D>
                        <dxc:AxisX2D.WholeRange>
                            <dxc:Range SideMarginsValue="0.5" 
                                       AutoSideMargins="False"/>
                        </dxc:AxisX2D.WholeRange>
                        <dxc:AxisX2D.DateTimeScaleOptions>
                            <dxc:ManualDateTimeScaleOptions MeasureUnit="Year"/>
                        </dxc:AxisX2D.DateTimeScaleOptions>
                    </dxc:AxisX2D>
                </dxc:XYDiagram2D.AxisX>
            </dxc:XYDiagram2D>
        </dxc:ChartControl>
    </Grid>
</Window>

using System;
using System.Collections.ObjectModel;
using System.Windows;
namespace Area2DChart {
    public partial class Window1 : Window {
        public Window1() {
            InitializeComponent();
        }
    }
    public class ChartViewModel {
        public ObservableCollection<DataSeries> Data { get; private set; }

        public ChartViewModel() {
            Data = new ObservableCollection<DataSeries> {
                new DataSeries{
                    Name = "DevAV North",
                    Values = new ObservableCollection<DataPoint> {
                        new DataPoint (new DateTime(2013,12,31), 362.5),
                        new DataPoint (new DateTime(2014,12,31), 348.4),
                        new DataPoint (new DateTime(2015,12,31), 279.0),
                        new DataPoint (new DateTime(2016,12,31), 230.9),
                        new DataPoint (new DateTime(2017,12,31), 203.5),
                        new DataPoint (new DateTime(2018,12,31), 197.1)
                    }
                },
                new DataSeries{
                    Name = "DevAV South",
                    Values = new ObservableCollection<DataPoint> {
                        new DataPoint (new DateTime(2013,12,31), 277.0),
                        new DataPoint (new DateTime(2014,12,31), 328.5),
                        new DataPoint (new DateTime(2015,12,31), 297.0),
                        new DataPoint (new DateTime(2016,12,31), 255.3),
                        new DataPoint (new DateTime(2017,12,31), 173.5),
                        new DataPoint (new DateTime(2018,12,31), 131.8)
                    }
                }
            };
        }
        public class DataSeries {
            public string Name { get; set; }
            public ObservableCollection<DataPoint> Values { get; set; }
        }
        public class DataPoint {
            public DateTime Argument { get; set; }
            public double Value { get; set; }
            public DataPoint(DateTime argument, double value) {
                Argument = argument;
                Value = value;
            }
        }
    }
}

Imports System
Imports System.Collections.ObjectModel
Imports System.Windows
Namespace Area2DChart
    Partial Public Class Window1
        Inherits Window

        Public Sub New()
            InitializeComponent()
        End Sub
    End Class
    Public Class ChartViewModel
        Private privateData As ObservableCollection(Of DataSeries)
        Public Property Data() As ObservableCollection(Of DataSeries)
            Get
                Return privateData
            End Get
            Private Set(ByVal value As ObservableCollection(Of DataSeries))
                privateData = value
            End Set
        End Property

        Public Sub New()
            Data = New ObservableCollection(Of DataSeries) _
                From {
                    New DataSeries With {
                        .Name = "DevAV North",
                        .Values = New ObservableCollection(Of DataPoint) From {
                            New DataPoint(New Date(2013,12,31), 362.5),
                            New DataPoint(New Date(2014,12,31), 348.4),
                            New DataPoint(New Date(2015,12,31), 279.0),
                            New DataPoint(New Date(2016,12,31), 230.9),
                            New DataPoint(New Date(2017,12,31), 203.5),
                            New DataPoint(New Date(2018,12,31), 197.1)
                        }
                    },
                    New DataSeries With {
                        .Name = "DevAV South",
                        .Values = New ObservableCollection(Of DataPoint) From {
                            New DataPoint(New Date(2013,12,31), 277.0),
                            New DataPoint(New Date(2014,12,31), 328.5),
                            New DataPoint(New Date(2015,12,31), 297.0),
                            New DataPoint(New Date(2016,12,31), 255.3),
                            New DataPoint(New Date(2017,12,31), 173.5),
                            New DataPoint(New Date(2018,12,31), 131.8)
                        }
                    }
                }
        End Sub
        Public Class DataSeries
            Public Property Name() As String
            Public Property Values() As ObservableCollection(Of DataPoint)
        End Class
        Public Class DataPoint
            Public Property Argument() As Date
            Public Property Value() As Double
            Public Sub New(ByVal argument As Date, ByVal value As Double)
                Me.Argument = argument
                Me.Value = value
            End Sub
        End Class
    End Class
End Namespace