Lesson 2 - Create a Pie Chart

• May 26, 2022
• 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:

C#

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:

C#

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:

XAML

<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:

XAML

<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.

XAML

<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.

XAML

<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:

XAML

<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>

C#

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: