Lesson 1 - Create a Cartesian Chart
- 5 minutes to read
This lesson demonstrates how to create a Cartesian chart, bind it to data, add a legend, and configure axes.
Before you proceed with charts, read the following topics:
- Windows UI Library 3
- Get Started with WinUI 3 for Desktop Apps
- DevExpress WinUI Controls: Get Started
Create a New Project
Create a new Blank App, Packaged with Windows Application Packaging Project (WinUI 3 in Desktop) project and add the DevExpress.WinUI NuGet package.
Refer to the following topic for more information on how to create a new project: DevExpress WinUI Controls: Get Started.
Add a Data Model
In the MainWindow.xaml.cs, add a new DataPoint class that defines a data model:
public class DataPoint
{
public DateTime Date { get; set; }
public double Total { get; set; }
}
Add a View Model
In the MainWindow.xaml.cs, add a new ChartViewModel class that specifies a view model:
public class ChartViewModel : ViewModelBase
{
public ChartViewModel()
{
List<DataPoint> dataPoints = new List<DataPoint> {
new DataPoint() { Date = new DateTime(2020, 01, 01), Total = 396.45 },
new DataPoint() { Date = new DateTime(2020, 02, 01), Total = 496.253 },
new DataPoint() { Date = new DateTime(2020, 03, 01), Total = 536.45 },
new DataPoint() { Date = new DateTime(2020, 04, 01), Total = 539.632 },
new DataPoint() { Date = new DateTime(2020, 05, 01), Total = 634.42 },
new DataPoint() { Date = new DateTime(2020, 06, 01), Total = 645.637 },
new DataPoint() { Date = new DateTime(2020, 07, 01), Total = 696.1 },
new DataPoint() { Date = new DateTime(2020, 08, 01), Total = 701.756 },
new DataPoint() { Date = new DateTime(2020, 09, 01), Total = 782.822 }
};
DataPoints = dataPoints;
}
public List<DataPoint> DataPoints { get; }
}
In the MainWindow.xaml, specify the window’s data context as follows:
<Window
...
xmlns:local="using:CartesianChartSample">
<Grid>
<Grid.DataContext>
<local:ChartViewModel/>
</Grid.DataContext>
</Grid>
...
</Window>
Add the CartesianChart Control to the MainWindow
Add a CartesianChart instance to the window:
<Window
...
xmlns:Charts="using:DevExpress.WinUI.Charts">
<Grid>
<Charts:CartesianChart x:Name="chart">
...
</Charts:CartesianChart>
</Grid>
</Window>
Add a Series and Bind it to Data
Add a Series object to the CartesianChart.Series collection.
Set the Series.DisplayName property to “Sales (DevAV North)” to specify the series name. Names are displayed in the legend to distinguish between series.
Initialize the Series.View property with a LineSeriesView object to display data points as a line chart.
Configure view settings:
- Specify the SeriesView.ToolTipPointPattern and SeriesView.ToolTipSeriesPattern properties to format series tooltip text.
- Set the LineSeriesViewBase.ShowMarkers property to True to enable markers.
To bind the series to data, initialize the Series.Data property with a DataSource object and define its settings:
- Bind DataSource.PointSource to the view model’s DataPoints property.
- Use the DataSource.ArgumentDataMember and DataSource.ValueDataMember properties to specify the data members for series arguments and values. Specify the DataSource.ArgumentScaleType and DataSource.ValueScaleType properties to define data member scale types.
<Charts:CartesianChart ToolTipEnabled="True">
<Charts:CartesianChart.Series>
<Charts:Series x:Name="seriesDevAVNorth" DisplayName="Sales (DevAV North)">
<Charts:Series.View>
<Charts:LineSeriesView ToolTipPointPattern="{}{A:MMMM, d}: {V:f2}K"
ToolTipSeriesPattern="{}{S}"
ShowMarkers="True"/>
</Charts:Series.View>
<Charts:Series.Data>
<Charts:DataSource PointSource="{Binding DataPoints}"
ArgumentDataMember="Date"
ArgumentScaleType="DateTime"
ValueDataMember="Total"
ValueScaleType="Numerical">
</Charts:DataSource>
</Charts:Series.Data>
</Charts:Series>
</Charts:CartesianChart.Series>
</Charts:CartesianChart>
Add a Legend
Initialize the ChartBase.Legend property with a Legend object.
Use the HorizontalPosition and VerticalPosition properties to specify the legend’s position.
<Charts:CartesianChart.Legend>
<Charts:Legend HorizontalPosition="Center" VerticalPosition="BottomOutside"/>
</Charts:CartesianChart.Legend>
Customize Axes
Initialize the CartesianChart.AxisX property with an AxisX object.
Initialize the CartesianChart.AxisY property with an AxisY object.
Specify the AxisBase.LabelPattern property to format axis labels.
<Charts:CartesianChart.AxisX>
<Charts:AxisX LabelPattern="{}{V:MMMM}"/>
</Charts:CartesianChart.AxisX>
<Charts:CartesianChart.AxisY>
<Charts:AxisY LabelPattern="${V}K"/>
</Charts:CartesianChart.AxisY>
Results
The chart is ready. Your code and XAML should look as follows:
<Window
x:Class="CartesianChartSample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:CartesianChartSample"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:Charts="using:DevExpress.WinUI.Charts"
mc:Ignorable="d">
<Grid>
<Grid.DataContext>
<local:ChartViewModel/>
</Grid.DataContext>
<Charts:CartesianChart x:Name="chart" ToolTipEnabled="True">
<Charts:CartesianChart.Legend>
<Charts:Legend HorizontalPosition="Center" VerticalPosition="BottomOutside"/>
</Charts:CartesianChart.Legend>
<Charts:CartesianChart.AxisX>
<Charts:AxisX LabelPattern="{}{V:MMMM}"/>
</Charts:CartesianChart.AxisX>
<Charts:CartesianChart.AxisY>
<Charts:AxisY LabelPattern="${V}K"/>
</Charts:CartesianChart.AxisY>
<Charts:CartesianChart.Series>
<Charts:Series x:Name="seriesDevAVNorth" DisplayName="Sales (DevAV North)">
<Charts:Series.View>
<Charts:LineSeriesView ToolTipPointPattern="{}{A:MMMM, d}: {V:f2}K"
ToolTipSeriesPattern="{}{S}"
ShowMarkers="True"/>
</Charts:Series.View>
<Charts:Series.Data>
<Charts:DataSource PointSource="{Binding DataPoints}"
ArgumentDataMember="Date"
ArgumentScaleType="DateTime"
ValueDataMember="Total"
ValueScaleType="Numerical">
</Charts:DataSource>
</Charts:Series.Data>
</Charts:Series>
</Charts:CartesianChart.Series>
</Charts:CartesianChart>
</Grid>
</Window>
using DevExpress.Mvvm;
using Microsoft.UI.Xaml;
using System;
using System.Collections.Generic;
namespace CartesianChartSample {
public sealed partial class MainWindow : Window {
public MainWindow() {
this.InitializeComponent();
}
}
public class DataPoint {
public DateTime Date { get; set; }
public double Total { get; set; }
}
public class ChartViewModel : ViewModelBase {
public ChartViewModel() {
List<DataPoint> dataPoints = new List<DataPoint> {
new DataPoint() { Date = new DateTime(2020, 01, 01), Total = 396.45 },
new DataPoint() { Date = new DateTime(2020, 02, 01), Total = 496.253 },
new DataPoint() { Date = new DateTime(2020, 03, 01), Total = 536.45 },
new DataPoint() { Date = new DateTime(2020, 04, 01), Total = 539.632 },
new DataPoint() { Date = new DateTime(2020, 05, 01), Total = 634.42 },
new DataPoint() { Date = new DateTime(2020, 06, 01), Total = 645.637 },
new DataPoint() { Date = new DateTime(2020, 07, 01), Total = 696.1 },
new DataPoint() { Date = new DateTime(2020, 08, 01), Total = 701.756 },
new DataPoint() { Date = new DateTime(2020, 09, 01), Total = 782.822 }
};
DataPoints = dataPoints;
}
public List<DataPoint> DataPoints { get; }
}
}
Run the project. The following image illustrates the resulting chart: