Lesson 2 - Create a Pie Chart
- 5 minutes to read
This lesson demonstrates how to create a Pie chart, bind it to data, add a legend, and customize Pie slice labels.
Before you proceed, review 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 string Product { get; set; }
public double Income { get; set; }
}
#Add a View Model
In the MainWindow.xaml.cs, add a new ChartViewModel class that specifies a view model:
using DevExpress.Mvvm;
using Microsoft.UI.Xaml;
using System.Collections.Generic;
public class ChartViewModel : ViewModelBase
{
public ChartViewModel()
{
List<DataPoint> dataPoints = new List<DataPoint> {
new DataPoint() { Product = "Camera", Income = 78 },
new DataPoint() { Product = "Flash", Income = 92 },
new DataPoint() { Product = "Smartphone", Income = 43 },
new DataPoint() { Product = "Tripod", Income = 98 },
new DataPoint() { Product = "Mobile Phone", Income = 70 },
new DataPoint() { Product = "Smart Watch", Income = 98 },
new DataPoint() { Product = "Laptop", Income = 85 },
new DataPoint() { Product = "Tablet", Income = 99 },
new DataPoint() { Product = "Headphone", Income = 94 }
};
DataPoints = dataPoints;
}
public List<DataPoint> DataPoints { get; }
}
In the MainWindow.xaml, specify the window’s data context as follows:
<Window
...
xmlns:local="using:PieChartSample">
<Grid>
<Grid.DataContext>
<local:ChartViewModel/>
</Grid.DataContext>
</Grid>
...
</Window>
#Add the PieChart Control to the Window
Add a PieChart instance to the window:
<Window
...
xmlns:Charts="using:DevExpress.WinUI.Charts">
<Grid>
<Charts:PieChart x:Name="chart">
...
</Charts:PieChart>
</Grid>
</Window>
#Add a Series and Bind it to Data
Add a PieSeries object to the PieChart.Series collection.
To bind the series to data, initialize the PieSeries.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.
Initialize the PieSeries.View property with a PieSeriesView object to display data points as a pie chart. Then, configure view settings:
Specify the SeriesView.ToolTipPointPattern property to format tooltips that are displayed for pie slices. In this example, pie slice tooltips display an argument and corresponding value as percentage.
Define the SeriesView.LegendPointPattern property to format text displayed for each series point in the legend.
Set the SeriesView.ShowLabels property to True to enable labels for slices.
To customize label settings, specify the SeriesView.LabelPattern and PieSeriesView.LabelPosition properties to customize label text and position.
Initialize the PieSeriesView.Title property with a TextBlock object to add an individual title for the pie series. Specify the title content and margin.
<Charts:PieChart x:Name="chart" ToolTipEnabled="True">
<Charts:PieChart.Series>
<Charts:PieSeries x:Name="series">
<Charts:PieSeries.View>
<Charts:PieSeriesView ToolTipPointPattern="{}{A}: {VP:p}"
LegendPointPattern="{}{A} (${V}K)"
ShowLabels="True" LabelPattern="{}{VP:p}"
LabelPosition="TwoColumns">
<Charts:PieSeriesView.Title>
<TextBlock Text="Sales Volume by Products" Margin="10"/>
</Charts:PieSeriesView.Title>
</Charts:PieSeriesView>
</Charts:PieSeries.View>
<Charts:PieSeries.Data>
<Charts:DataSource PointSource="{Binding DataPoints}"
ArgumentDataMember="Product"
ArgumentScaleType="Qualitative"
ValueDataMember="Income"
ValueScaleType="Numerical"/>
</Charts:PieSeries.Data>
</Charts:PieSeries>
</Charts:PieChart.Series>
</Charts:PieChart>
#Add a Legend
Initialize the ChartBase.Legend property with a Legend object.
Use the HorizontalPosition and VerticalPosition properties to specify the legend’s position.
Set Legend.Orientation to Horizontal and Legend.MaximumRowsOrColumns to 1 to put legend items in a column.
<Charts:PieChart.Legend>
<Charts:Legend HorizontalPosition="RightOutside"
VerticalPosition="Center"
Orientation="Horizontal"
MaximumRowsOrColumns="1"/>
</Charts:PieChart.Legend>
#Results
The chart is ready. Your code and XAML should look as follows:
<Window
x:Class="PieChartSample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:PieChartSample"
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:PieChart x:Name="chart" ToolTipEnabled="True">
<Charts:PieChart.Legend>
<Charts:Legend HorizontalPosition="RightOutside"
VerticalPosition="Center"
Orientation="Horizontal"
MaximumRowsOrColumns="1"/>
</Charts:PieChart.Legend>
<Charts:PieChart.Series>
<Charts:PieSeries x:Name="series">
<Charts:PieSeries.View>
<Charts:PieSeriesView ToolTipPointPattern="{}{A}: {VP:p}"
LegendPointPattern="{}{A} (${V}K)"
ShowLabels="True" LabelPattern="{}{VP:p}"
LabelPosition="TwoColumns">
<Charts:PieSeriesView.Title>
<TextBlock Text="Sales Volume by Products" Margin="10"/>
</Charts:PieSeriesView.Title>
</Charts:PieSeriesView>
</Charts:PieSeries.View>
<Charts:PieSeries.Data>
<Charts:DataSource PointSource="{Binding DataPoints}"
ArgumentDataMember="Product"
ArgumentScaleType="Qualitative"
ValueDataMember="Income"
ValueScaleType="Numerical"/>
</Charts:PieSeries.Data>
</Charts:PieSeries>
</Charts:PieChart.Series>
</Charts:PieChart>
</Grid>
</Window>
using DevExpress.Mvvm;
using Microsoft.UI.Xaml;
using System.Collections.Generic;
namespace PieChartSample {
public sealed partial class MainWindow : Window {
public MainWindow() {
this.InitializeComponent();
}
}
public class DataPoint {
public string Product { get; set; }
public double Income { get; set; }
}
public class ChartViewModel : ViewModelBase {
public ChartViewModel() {
List<DataPoint> dataPoints = new List<DataPoint> {
new DataPoint() { Product = "Camera", Income = 78 },
new DataPoint() { Product = "Flash", Income = 92 },
new DataPoint() { Product = "Smartphone", Income = 43 },
new DataPoint() { Product = "Tripod", Income = 98 },
new DataPoint() { Product = "Mobile Phone", Income = 70 },
new DataPoint() { Product = "Smart Watch", Income = 98 },
new DataPoint() { Product = "Laptop", Income = 85 },
new DataPoint() { Product = "Tablet", Income = 99 },
new DataPoint() { Product = "Headphone", Income = 94 }
};
DataPoints = dataPoints;
}
public List<DataPoint> DataPoints { get; }
}
}
Run the project. The following image illustrates the resulting chart: