Lesson 2 - Creating a Pie Chart

• Jan 11, 2022
• 3 minutes to read

This lesson demonstrates how to create a simple Pie chart with a single Pie series, populate the chart with data and adjust common settings.

Do the following to create a simple chart application.

• Step 1. Create a New Project and Add a Chart
• Step 2. Provide Chart Data
• Step 3. Customize the Chart’s View
• Result

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

To do this, run MS Visual Studio 2017. Create a new application by choosing New Project from the File menu or by pressing Ctrl+Shift+N. Next, select Universal, and then choose Blank App (Universal Windows). Switch to the MainPage.xaml design view and add the PieChart control to the main page by dragging and dropping the PieChart item from the DX.19.2: Visualization toolbox tab.

Right-click the PieChart object and choose the Layout | Reset All option in the context menu. This will stretch the chart to fill the entire window.

Note

The following SDK extensions will be added to the References list of your project: DevExpress.Core and DevExpress.Visualization.

Your XAML may look like the following code. If it doesn’t, you can overwrite your code as follows:

XAML

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Charts="using:DevExpress.UI.Xaml.Charts"
    x:Class="PieChart.MainPage">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        <Charts:PieChart/>

    </Grid>
</Page>

Let’s proceed to the next step, and see how to add a series to the chart and provide series points with data.

Step 2. Provide Chart Data

First, you need to fill the chart with data. Let’s start by adding a series.

• For the PieChart control, locate the ChartBase.Series property and click the ellipsis button to invoke the Object Collection Editor: Series dialog. Add one Series object to the collection in this dialog.

  

• Next, specify a series view for the series by setting the Series.View property to PieSeriesView.

  

• To provide data for a series, it is necessary to assign a DataPointCollection to the Series.Data property and fill it with DataPoint objects. To do this, add data points with the following arguments and values.

  Argument	Value
  Russia	17.0752
  Canada	9.98467
  USA	9.63142
  China	9.59696
  Brazil	8.511965
  Australia	7.68685
  India	3.28759
  Others	81.2

  

Step 3. Customize the Chart’s View

In this step, the view of the chart will be customized.

• To customize the donut hole in the chart, set the DonutSeriesView.HoleRadiusPercent property to 70.

  

• Change how the data points are described in the legend. To do this, set the view’s SeriesView.LegendPointPattern property to {A}: {VP:P}.

  

• To explain the meaning of the diagram, add a title to donut, specifying the PieSeriesView.Title property. Set the SeriesTitle.Content property to Area of Countries.

  

• Add a legend to the chart. To do this, locate the ChartBase.Legend property and click the New button.

  

Result

Your chart is now ready. Your XAML should appear as follows:

XAML

<Page xmlns:Charts="using:DevExpress.UI.Xaml.Charts" 
    x:Class="PieChartLesson.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:PieChartLesson">

    <Page.Resources>
        <local:MyConverter x:Key="converter"/>
    </Page.Resources>

    <Grid 
        Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Charts:PieChart >
            <Charts:PieChart.Palette>
                <Charts:OfficePalette/>
            </Charts:PieChart.Palette>
            <Charts:PieChart.Legend>
                <Charts:Legend/>
            </Charts:PieChart.Legend>
            <Charts:PieChart.Series>
                <Charts:Series 
                    x:Name="series" 
                    DisplayName="Area of Countries">
                    <Charts:Series.View>
                        <Charts:DonutSeriesView 
                            HoleRadiusPercent="70" 
                            LegendPointPattern="{}{A}: {VP:P}">
                            <Charts:DonutSeriesView.Title>
                                <Charts:SeriesTitle
                                    Content="Area of Countries"/>
                            </Charts:DonutSeriesView.Title>
                        </Charts:DonutSeriesView>
                    </Charts:Series.View>
                    <Charts:DataPointCollection>
                        <Charts:DataPoint 
                            Argument="Russia" 
                            Value="17.0752" />
                        <Charts:DataPoint 
                            Argument="Canada"
                            Value="9.98467" />
                        <Charts:DataPoint 
                            Argument="USA" 
                            Value="9.63142" />
                        <Charts:DataPoint 
                            Argument="China" 
                            Value="9.59696" />
                        <Charts:DataPoint 
                            Argument="Brazil" 
                            Value="8.511965" />
                        <Charts:DataPoint 
                            Argument="Australia" 
                            Value="7.68685" />
                        <Charts:DataPoint 
                            Argument="India" 
                            Value="3.28759" />
                        <Charts:DataPoint 
                            Argument="Others" 
                            Value="81.2"/>
                    </Charts:DataPointCollection>
                </Charts:Series>
            </Charts:PieChart.Series>
        </Charts:PieChart>
    </Grid>
</Page>

Run the project. The following image illustrates the resulting chart at runtime.