[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
  Prerequisites
 [Expand]What's Installed
 [Expand].NET Core 3 Support
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
   Reporting
  [Expand]Data Grid
  [Expand]Ribbon, Bars and Menu
  [Collapse]Charts Suite
   [Collapse]Chart Control
    [Expand]Getting Started
    [Expand]Fundamentals
    [Expand]Providing Data
    [Expand]Chart Elements
    [Expand]Appearance Customization
    [Expand]End-User Features
    [Expand]Design-Time Features
    [Collapse]Examples
     [Collapse]2D Chart Types
       How to: Create a 2D Area Chart
       How to: Create a 2D Spline Area Chart
       How to: Create a 2D Bubble Chart
       How to: Create a 2D Candle Stick Chart
       How to: Create a 2D Funnel Chart
       How to: Create a 2D Full-Stacked Area Chart
       How to: Create a 2D Full-Stacked Bar Chart
       How to: Create a 2D Full-Stacked Line Chart
       How to: Create a 2D Full-Stacked Spline Area Chart
       How to: Create a 2D Line Chart
       How to: Create a 2D Spline Chart
       How to: Create a 2D Nested Donut Chart
       How to: Create a 2D Overlapped Range Bar Chart
       How to: Create a 2D Pie (Donut) Chart
       How to: Create a 2D Point Chart
       How to: Create a 2D Polar Area Chart
       How to: Create a 2D Polar Line Chart
       How to: Create a 2D Polar Point Chart
       How to: Create a 2D Radar Area Chart
       How to: Create a 2D Radar Line Chart
       How to: Create a 2D Radar Point Chart
       How to: Create a 2D Range Area Chart
       How to: Create a 2D Scatter Line Chart
       How to: Draw a Custom Function in the 2D Scatter Line Chart
       How to: Create a 2D Side-by-Side Bar Chart
       How to: Create a 2D Side-by-Side Full-Stacked Bar Chart
       How to: Create a 2D Side-by-Side Range Bar Chart
       How to: Create a 2D Side-by-Side Stacked Bar Chart
       How to: Create a 2D Stacked Area Chart
       How to: Create a 2D Stacked Bar Chart
       How to: Create a 2D Stacked Line Chart
       How to: Create a 2D Stacked Spline Area Chart
       How to: Create a 2D Stock Chart
       How to: Create a 2D Step Area Chart
       How to: Create a 2D Step Line Chart
       How to: Create a 2D Scatter Polar Line Chart
       How to: Create a 2D Scatter Radar Line Chart
     [Expand]3D Chart Types
     [Expand]Providing Data
     [Expand]Data Representation
     [Expand]Chart Elements
     [Expand]Appearance Customization
     [Expand]End-User Interaction
     [Expand]Miscellaneous
    [Expand]Additional Resources
   [Expand]Chart3D Control
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [Expand]Printing-Exporting
  [Expand]Data Editors
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Gantt Control
  [Expand]Diagram Control
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
 [Expand]Localization
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

How to: Create a 2D Area Chart

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

  1. Create a ChartControl (see ChartControl) and set its ChartControl.Diagram property to a XYDiagram2D (see 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 (see 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 (see Title) to the ChartControlBase.Titles collection. Define the title's Content (see TitleBase.Content) and HorizontalAlignment (see TitleBase.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 (see 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 (see 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 (see ManualDateTimeScaleOptions) Contains settings for a date-time axis data when its scale mode is manual.

Expanded See Also

Is this topic helpful?​​​​​​​