How to: Create a 2D Area Chart

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


    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

<Window x:Class="Area2DChart.Window1" 
        Title="Window1" Height="420" Width="690">
                <dxc:Title Content="Outside Vendor Costs" HorizontalAlignment="Center"/>
            <dxc:XYDiagram2D SeriesItemsSource="{Binding Data}">
                        <dxc:AreaSeries2D DisplayName="{Binding Name}" 
                                          DataSource="{Binding Values}"
                            <dxc:Range SideMarginsValue="0.5" 
                            <dxc:ManualDateTimeScaleOptions MeasureUnit="Year"/>
See Also