How to: Create a 2D Pie (Donut) Chart

• Apr 15, 2018
• 3 minutes to read

This example demonstrates how to create a 2D Pie chart.

Create a ChartControl and specify its ChartControl.Diagram property to a SimpleDiagram2D object.

Note

Note that the ChartControl.Diagram is a content property. You can declare a diagram in XAML directly after a chart control’s declaration without wrapping it in opening and closing ChartControl.Diagram tags.

Add a PieSeries2D object to the Diagram.Series collection.

Note

Note that the Diagram.Series is a content property. You can declare series in XAML directly after a diagram’s declaration without wrapping them in opening and closing Diagram.Series tags.

Use the following properties to bind the series to data:

• Series.DataSource - Specifies the series’s data source.
• Series.ArgumentDataMember - Defines the data member that provides the series’s arguments.
• Series.ValueDataMember - Specifies the data member that provides the series’s values.

The PieSeries2D.Model property allows you to change the series appearance using the built-in models. This example uses the GlarePie2DModel model.

Use the Series.LegendTextPattern property to specify how to format text that identifies series points in the legend.

Set the Series.LabelsVisibility property to true to display the series’s labels. The SeriesLabel.TextPattern property defines how to configure series labels’ text.

The PieTotalLabel.TextPattern property allows you to specify the center label’s content.

View Example

Window1.xaml

<Window x:Class="PieDonut2DChart.Window1" 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts"
        xmlns:local="clr-namespace:PieDonut2DChart"
        Title="Window1" Height="470" Width="700">
    <Window.DataContext>
        <local:ChartViewModel/>
    </Window.DataContext>
    <Grid>
        <dxc:ChartControl Name="chartControl">
            <dxc:SimpleDiagram2D>
                <dxc:PieSeries2D x:Name="series" 
                                 DisplayName="Sales" 
                                 DataSource="{Binding Path=Data}"
                                 ArgumentDataMember="Argument" 
                                 ValueDataMember="Value"
                                 LabelsVisibility="True" 
                                 LegendTextPattern="{}{A}: {V}"
                                 HoleRadiusPercent="50">
                    <!--region #Model-->
                    <dxc:PieSeries2D.Model>
                        <dxc:GlarePie2DModel/>
                    </dxc:PieSeries2D.Model>
                    <!--endregion #Model-->
                    <dxc:PieSeries2D.TotalLabel>
                        <dxc:PieTotalLabel TextPattern="Total:&#x0a;{TV}"/>
                    </dxc:PieSeries2D.TotalLabel>
                    <dxc:PieSeries2D.Label>
                        <dxc:SeriesLabel TextPattern="{}{VP:P}" 
                                         dxc:PieSeries.LabelPosition="TwoColumns"/>
                    </dxc:PieSeries2D.Label>
                </dxc:PieSeries2D>
            </dxc:SimpleDiagram2D>
            <dxc:ChartControl.Legends>
                <dxc:Legend>
                    <dxc:Legend.Title>
                        <dxc:LegendTitle Content="Units Sold"/>
                    </dxc:Legend.Title>
                </dxc:Legend>
            </dxc:ChartControl.Legends>
        </dxc:ChartControl>
    </Grid>
</Window>

C#

using System.Collections.ObjectModel;
using System.Windows;

namespace PieDonut2DChart {
    public partial class Window1 : Window {
        public Window1() {
            InitializeComponent();
        }
    }
    public class ChartViewModel {
        public Collection<DataPoint> Data { get; private set; }
        public ChartViewModel() {
            Data = new Collection<DataPoint> {
                        new DataPoint ("Bikes", 142345),
                        new DataPoint ("Accessories", 266344),
                        new DataPoint ("Components", 631359),
                        new DataPoint ("Clothing", 120007)
            };
        }
        public class DataPoint {
            public string Argument { get; private set; }
            public double Value { get; private set; }
            public DataPoint(string argument, double value) {
                Argument = argument;
                Value = value;
            }
        }
    }
}

VB.NET

Imports System.Collections.ObjectModel
Imports System.Windows

Namespace PieDonut2DChart
    Partial Public Class Window1
        Inherits Window

        Public Sub New()
            InitializeComponent()
        End Sub
    End Class
    Public Class ChartViewModel
        Private privateData As Collection(Of DataPoint)
        Public Property Data() As Collection(Of DataPoint)
            Get
                Return privateData
            End Get
            Private Set(ByVal value As Collection(Of DataPoint))
                privateData = value
            End Set
        End Property
        Public Sub New()
            Data = New Collection(Of DataPoint) From { _
                New DataPoint("Bikes", 142345), _
                New DataPoint("Accessories", 266344), _
                New DataPoint("Components", 631359), _
                New DataPoint("Clothing", 120007) _
            }
        End Sub
        Public Class DataPoint
            Private privateArgument As String
            Public Property Argument() As String
                Get
                    Return privateArgument
                End Get
                Private Set(ByVal value As String)
                    privateArgument = value
                End Set
            End Property
            Private privateValue As Double
            Public Property Value() As Double
                Get
                    Return privateValue
                End Get
                Private Set(ByVal value As Double)
                    privateValue = value
                End Set
            End Property
            Public Sub New(ByVal argument As String, ByVal value As Double)
                Me.Argument = argument
                Me.Value = value
            End Sub
        End Class
    End Class
End Namespace