# Lesson 1 - Bind Chart Series to Data | WPF Controls | DevExpress Documentation
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.
## Step 1. Create a New Project and Add a Chart
1. Run Microsoft Visual Studio.
2. Create a new **WPF Application** project. Name it *Lesson1BindChartToData*.
3. Drag the [ChartControl](/WPF/DevExpress.Xpf.Charts.ChartControl) component from the **DX.26.1: Data & Analytics** toolbox section to the Main Window.
4. Right-click the **ChartControl** and select **Layout | Reset All** in the context menu to make the chart fill the entire window.
The MainWindow markup should appear as follows:
```
```
References to the following libraries are automatically added to the project:
- *DevExpress.Data.v26.1*
- *DevExpress.Xpf.Core.v26.1*
- *DevExpress.Charts.v26.1.Core*
- *DevExpress.Xpf.Charts.v26.1*
- *DevExpress.Mvvm.v26.1*
- *DevExpress.Xpf.Printing.v26.1*
- *DevExpress.Printing.v26.1.Core*
Note
The references come 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\DevExpress 26.1\Components\Bin\Framework\*
## Step 2. Prepare a Data Model
You can bind the chart to a database, to an XML file, or to data created at runtime. The data source should implement the [IEnumerable](https://learn.microsoft.com/dotnet/api/system.collections.ienumerable) or [IListSource](https://learn.microsoft.com/dotnet/api/system.componentmodel.ilistsource) interface, or their descendants. Refer to the [Providing Data](/WPF/6854/controls-and-libraries/charts-suite/chart-control/provide-data/provide-data) section for more information about how to populate a chart with data.
In this topic, you bind a chart to an [ObservableCollection<T>](https://learn.microsoft.com/dotnet/api/system.collections.objectmodel.observablecollection-1). Use the **DataPoint** class implementation to develop a Data Model:
- C#
- VB.NET
using System.Collections.ObjectModel;
using System.Windows;
namespace Lesson1BindChartToData {
public class DataPoint {
public string Argument { get; set; }
public double Value { get; set; }
public static ObservableCollection<DataPoint> GetDataPoints() {
return new ObservableCollection<DataPoint> {
new DataPoint { Argument = "Asia", Value = 5.289D},
new DataPoint { Argument = "Australia", Value = 2.2727D},
new DataPoint { Argument = "Europe", Value = 3.7257D},
new DataPoint { Argument = "North America", Value = 4.1825D},
new DataPoint { Argument = "South America", Value = 2.1172D}
};
}
}
}
Imports System.Collections.ObjectModel
Imports System.Windows
Namespace Lesson1BindChartToData
Public Class DataPoint
Public Property Argument() As String
Public Property Value() As Double
Public Shared Function GetDataPoints() As ObservableCollection(Of DataPoint)
Return New ObservableCollection(Of DataPoint) From {
New DataPoint With {
.Argument = "Asia",
.Value = 5.289R
},
New DataPoint With {
.Argument = "Australia",
.Value = 2.2727R
},
New DataPoint With {
.Argument = "Europe",
.Value = 3.7257R
},
New DataPoint With {
.Argument = "North America",
.Value = 4.1825R
},
New DataPoint With {
.Argument = "South America",
.Value = 2.1172R
}
}
End Function
End Class
End Namespace
## Step 3. Add a ViewModel
Implement the **MainWindowViewModel** class with the following code snippet:
- C#
- VB.NET
using System.Collections.ObjectModel;
using System.Windows;
namespace Lesson1BindChartToData {
public class MainWindowViewModel {
public ObservableCollection<DataPoint> Data { get; private set; }
public MainWindowViewModel() {
this.Data = DataPoint.GetDataPoints();
}
}
}
Imports System.Collections.ObjectModel
Imports System.Windows
Namespace Lesson1BindChartToData
Public Class MainWindowViewModel
Private privateData As ObservableCollection(Of DataPoint)
Public Property Data() As ObservableCollection(Of DataPoint)
Get
Return privateData
End Get
Private Set(ByVal value As ObservableCollection(Of DataPoint))
privateData = value
End Set
End Property
Public Sub New()
Me.Data = DataPoint.GetDataPoints()
End Sub
End Class
End Namespace
## Step 4. Specify the Data Context
Build the solution. Click the MainWindow’s smart tag and specify the [DataContext](https://learn.microsoft.com/dotnet/api/system.windows.frameworkelement.datacontext#system-windows-frameworkelement-datacontext) property as shown below:
```
```
## Step 5. Bind the Chart to Data
Click the Chart Control’s smart tag. Specify the [ChartControl.DataSource](/WPF/DevExpress.Xpf.Charts.ChartControl.DataSource) property as shown in the following image:
The `DataSource` property appears in the markup:
```
```
## Step 6. Specify the Chart Type
In the Chart Control’s smart tag menu, set the [ChartControl.Diagram](/WPF/DevExpress.Xpf.Charts.ChartControl.Diagram) property to the `XYDiagram2D` type and add a [legend](/WPF/6343/controls-and-libraries/charts-suite/chart-control/legends) and a [title](/WPF/7844/controls-and-libraries/charts-suite/chart-control/chart-titles).
Specify the [BarSideBySideSeries2D](/WPF/DevExpress.Xpf.Charts.BarSideBySideSeries2D) series view type in the `XYDiagram2D`‘s smart tag:
The following properties appear in the markup:
```
```
## Step 7. Populate the Series with Data
Specify the data source fields that supply values for series point arguments and values.
1. Set the [Series.ArgumentDataMember](/WPF/DevExpress.Xpf.Charts.Series.ArgumentDataMember) property to *Argument*.
2. Set the [Series.ValueDataMember](/WPF/DevExpress.Xpf.Charts.Series.ValueDataMember) property to *Value*.
The following properties appear in the markup:
```
```
## Step 7. Customize the Chart
### Specify the Series Name
Set the [Series.DisplayName](/WPF/DevExpress.Xpf.Charts.Series.DisplayName) property to *Annual Statistics*. The display name identifies the series in the [legend](/WPF/6343/controls-and-libraries/charts-suite/chart-control/legends).
### Customize the Chart Title
In the Title’s property grid, set the [TitleBase.HorizontalAlignment](/WPF/DevExpress.Xpf.Charts.TitleBase.HorizontalAlignment) property to *Center*. Define [TitleBase.Content](/WPF/DevExpress.Xpf.Charts.TitleBase.Content) as *Sales by Regions* and click **OK**.
### Configure the Crosshair Cursor’s Options
To customize the [crosshair](/WPF/14682/controls-and-libraries/charts-suite/chart-control/tooltip-and-crosshair-cursor/crosshair-cursor) options, click the [ChartControl.CrosshairOptions](/WPF/DevExpress.Xpf.Charts.ChartControl.CrosshairOptions) property’s **New** button to create a [CrosshairOptions](/WPF/DevExpress.Xpf.Charts.CrosshairOptions) instance. Enable the following properties:
- [CrosshairOptions.ShowArgumentLabels](/WPF/DevExpress.Xpf.Charts.CrosshairOptions.ShowArgumentLabels)
- [CrosshairOptions.ShowValueLabels](/WPF/DevExpress.Xpf.Charts.CrosshairOptions.ShowValueLabels)
- [CrosshairOptionsBase.ShowValueLine](/WPF/DevExpress.Xpf.Charts.CrosshairOptionsBase.ShowValueLine)
Set [XYSeries2D.CrosshairLabelPattern](/WPF/DevExpress.Xpf.Charts.XYSeries2D.CrosshairLabelPattern) to *${V:f2}M*.
## Results
Run the project to see the results.
The resulting code appears as follows:
**Markup**
- XAML
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Lesson1BindChartToData"
xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts"
xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core"
x:Class="Lesson1BindChartToData.MainWindow"
mc:Ignorable="d" Title="MainWindow" Height="400" Width="650">
<Window.DataContext>
<local:MainWindowViewModel/>
</Window.DataContext>
<Grid>
<dxc:ChartControl DataSource="{Binding Data}">
<dxc:ChartControl.CrosshairOptions>
<dxc:CrosshairOptions ShowArgumentLabels="True"
ShowValueLabels="True"
ShowValueLine="True"/>
</dxc:ChartControl.CrosshairOptions>
<dxc:ChartControl.Titles>
<dxc:Title Content="Sales by Regions"
HorizontalAlignment="Center"/>
</dxc:ChartControl.Titles>
<dxc:ChartControl.Legends>
<dxc:Legend/>
</dxc:ChartControl.Legends>
<dxc:XYDiagram2D>
<dxc:BarSideBySideSeries2D DisplayName="Annual Statistics"
ArgumentDataMember="Argument"
ValueDataMember="Value"
CrosshairLabelPattern="${V:f2}M"/>
</dxc:XYDiagram2D>
</dxc:ChartControl>
</Grid>
</Window>
**Code-Behind**
- C#
- VB.NET
using System.Collections.ObjectModel;
using System.Windows;
namespace Lesson1BindChartToData {
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window {
public MainWindow() {
InitializeComponent();
}
}
public class MainWindowViewModel {
public ObservableCollection<DataPoint> Data { get; private set; }
public MainWindowViewModel() {
this.Data = DataPoint.GetDataPoints();
}
}
public class DataPoint {
public string Argument { get; set; }
public double Value { get; set; }
public static ObservableCollection<DataPoint> GetDataPoints() {
return new ObservableCollection<DataPoint> {
new DataPoint { Argument = "Asia", Value = 5.289D},
new DataPoint { Argument = "Australia", Value = 2.2727D},
new DataPoint { Argument = "Europe", Value = 3.7257D},
new DataPoint { Argument = "North America", Value = 4.1825D},
new DataPoint { Argument = "South America", Value = 2.1172D}
};
}
}
}
Imports System.Collections.ObjectModel
Imports System.Windows
Namespace Lesson1BindChartToData
''' <summary>
''' Interaction logic for MainWindow.xaml
''' </summary>
Partial Public Class MainWindow
Inherits Window
Public Sub New()
InitializeComponent()
End Sub
End Class
Public Class MainWindowViewModel
Private privateData As ObservableCollection(Of DataPoint)
Public Property Data() As ObservableCollection(Of DataPoint)
Get
Return privateData
End Get
Private Set(ByVal value As ObservableCollection(Of DataPoint))
privateData = value
End Set
End Property
Public Sub New()
Me.Data = DataPoint.GetDataPoints()
End Sub
End Class
Public Class DataPoint
Public Property Argument() As String
Public Property Value() As Double
Public Shared Function GetDataPoints() As ObservableCollection(Of DataPoint)
Return New ObservableCollection(Of DataPoint) From {
New DataPoint With {
.Argument = "Asia",
.Value = 5.289R
},
New DataPoint With {
.Argument = "Australia",
.Value = 2.2727R
},
New DataPoint With {
.Argument = "Europe",
.Value = 3.7257R
},
New DataPoint With {
.Argument = "North America",
.Value = 4.1825R
},
New DataPoint With {
.Argument = "South America",
.Value = 2.1172R
}
}
End Function
End Class
End Namespace
See Also
[Lesson 3 - Use a Series Template for Auto-Created Series](/WPF/9758/controls-and-libraries/charts-suite/chart-control/getting-started/lesson-3-use-a-series-template-for-auto-created-series)
[Provide Data](/WPF/6854/controls-and-libraries/charts-suite/chart-control/provide-data/provide-data)