[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
 [Expand]What's Installed
 [Expand].NET Core 3 Support
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
  [Expand]Data Grid
  [Expand]Ribbon, Bars and Menu
  [Collapse]Charts Suite
   [Collapse]Chart Control
    [Collapse]Getting Started
      Lesson 1 - Bind Chart Series to Data
      Lesson 2 - Create a Chart Using the Designer
      Lesson 3 - Use a Series Template for Auto-Created Series
    [Expand]Providing Data
    [Expand]Chart Elements
    [Expand]Appearance Customization
    [Expand]End-User Features
    [Expand]Design-Time Features
    [Expand]Additional Resources
   [Expand]Chart3D Control
  [Expand]Pivot Grid
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [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
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Lesson 1 - Bind Chart Series to Data

This lesson explains how to add a series to a chart's diagram, bind this series to a data source, and configure basic chart options.

Expanded Step 1. Create a New Project and Add a Chart

  • Run Microsoft Visual Studio 2012, 2013, 2015, 2017 or 2019.
  • Create a new WPF Application project. Name it Lesson1BindChartToData.
  • Drag the ChartControl component from the DX.19.2: Data & Analytics toolbox section to the Main Window.

  • Right-click the ChartControl and select Layout | Reset All in the context menu to make the chart fill the entire window.

The newly created chart contains a blank Side-by-Side Bar and a legend. The MainWindow's markup should appear as follows:

References to the following libraries are automatically added to the project:

  • DevExpress.Data.v19.2
  • DevExpress.Xpf.Core.v19.2
  • DevExpress.Charts.v19.2.Core
  • DevExpress.Xpf.Charts.v19.2
  • DevExpress.Mvvm.v19.2
  • DevExpress.Xpf.Printing.v19.2
  • DevExpress.Printing.v19.2.Core

The references are chosen from the Global Assembly Cache (GAC). To copy them locally or include them later in your product's installation, use the following directory:

C:\Program Files (x86)\DevExpress 19.2\Components\Bin\Framework\

Expanded Step 2. Prepare a Data Model

You can bind the chart to a database, to an XML file or data created at runtime. The data source should implement the System.Collections.IEnumerable, System.ComponentModel.IListSource or their descendants. Refer to the Providing Data section to for more information about how to populate a chart with data. In this topic, you bind a chart to an System.Collections.ObjectModel.ObservableCollection<T>.

Use the DataPoint class implementation to develop a Data Model:

Expanded Step 3. Add a ViewModel

Use the code below to implement the MainWindowViewModel class:

Expanded Step 4. Specify the Data Context

Build the solution.

Click the MainWindow's smart tag and specify the System.Windows.FrameworkElement.DataContext property as shown below:

Expanded Step 5. Bind the Chart to Data

Click the Chart Control's smart tag. Specify the ChartControl.DataSource property as the following image shows:

Expanded Step 6. Populate the Series with Data

Specify the data source's fields that should provide values for series point arguments and values.

Expanded Step 7. Customize the Chart

Specify the Series Name

Set the Series.DisplayName property to Annual Statistics. The display name identifies the series in the legend.

Add a Chart Title and Customize Its Position

Click the Chart Control Titles (see ChartControlBase.Titles) property's ellipsis button to invoke the title collection editor. Use the Add button to create new title and add it to the chart.

Set the TitleBase.HorizontalAlignment property to Center.

Define TitleBase.Content to Sales by Regions. Click OK.

Configure the Crosshair Cursor's Options

To customize crosshair options, click the ChartControl.CrosshairOptions property's New button to create a CrosshairOptions instance.

Enable the following properties:

Set XYSeries2D.CrosshairLabelPattern to ${V:f2}M.

Expanded Results

Run the project to see the results.

The resulting code looks as follows:



Expanded See Also

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