How to: Create a 2D Area Chart

• Jul 16, 2019
• 4 minutes to read

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

1. Create a ChartControl and set its ChartControl.Diagram property to a XYDiagram2D object.

   Note

   The ChartControl.Diagram is a content property. You can declare a diagram in XAML directly after a chart control’s declaration without wrapping it in opening and closing ChartControl.Diagram tags.

2. Specify the Diagram.SeriesItemsSource property to bind a collection of objects used to generate series.

   The Diagram.SeriesItemTemplate property allows you to define each series item presentation. Use the following API members to configure a series item:

   Member	Description
   AreaSeries2D	Represents the 2D Area series.
   Series.DataSource	Specifies the series’s data source.
   Series.ArgumentDataMember	Defines the data member that provides the series’s arguments.
   Series.ValueDataMember	Specifies the data member that provides the series’s values.
   Series.DisplayName	Gets or sets the display name of the series.

3. 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.

4. 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.

5. Use the following API members to configure the axis options.

   Member	Description
   XYDiagram2D.AxisX	Gets the X-axis.
   AxisX2D	Represents the X-axis of a XYDiagram2D class.
   Axis.WholeRange	Gets or sets the range through which it’s possible to scroll an axis.
   Range	Contains the common settings that define the range displayed by an axis.
   AxisX2D.DateTimeScaleOptions	Provides access to the options that define the behavior of a date-time X-scale when its mode is manual, automatic or continuous.
   ManualDateTimeScaleOptions	Contains settings for a date-time axis data when its scale mode is manual.

View Example

Window1.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>

Window1.xaml.cs

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;
            }
        }
    }
}

Window1.xaml.vb

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