[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Collapse]WPF Controls
  Prerequisites
 [Expand]What's Installed
 [Expand].NET Core 3 Support
 [Expand]Common Concepts
 [Expand]MVVM Framework
 [Collapse]Controls and Libraries
   Reporting
  [Expand]Data Grid
  [Expand]Ribbon, Bars and Menu
  [Collapse]Charts Suite
   [Collapse]Chart Control
    [Expand]Getting Started
    [Expand]Fundamentals
    [Expand]Providing Data
    [Expand]Chart Elements
    [Expand]Appearance Customization
    [Expand]End-User Features
    [Expand]Design-Time Features
    [Collapse]Examples
     [Collapse]2D Chart Types
       How to: Create a 2D Area Chart
       How to: Create a 2D Spline Area Chart
       How to: Create a 2D Bubble Chart
       How to: Create a 2D Candle Stick Chart
       How to: Create a 2D Funnel Chart
       How to: Create a 2D Full-Stacked Area Chart
       How to: Create a 2D Full-Stacked Bar Chart
       How to: Create a 2D Full-Stacked Line Chart
       How to: Create a 2D Full-Stacked Spline Area Chart
       How to: Create a 2D Line Chart
       How to: Create a 2D Spline Chart
       How to: Create a 2D Nested Donut Chart
       How to: Create a 2D Overlapped Range Bar Chart
       How to: Create a 2D Pie (Donut) Chart
       How to: Create a 2D Point Chart
       How to: Create a 2D Polar Area Chart
       How to: Create a 2D Polar Line Chart
       How to: Create a 2D Polar Point Chart
       How to: Create a 2D Radar Area Chart
       How to: Create a 2D Radar Line Chart
       How to: Create a 2D Radar Point Chart
       How to: Create a 2D Range Area Chart
       How to: Create a 2D Scatter Line Chart
       How to: Draw a Custom Function in the 2D Scatter Line Chart
       How to: Create a 2D Side-by-Side Bar Chart
       How to: Create a 2D Side-by-Side Full-Stacked Bar Chart
       How to: Create a 2D Side-by-Side Range Bar Chart
       How to: Create a 2D Side-by-Side Stacked Bar Chart
       How to: Create a 2D Stacked Area Chart
       How to: Create a 2D Stacked Bar Chart
       How to: Create a 2D Stacked Line Chart
       How to: Create a 2D Stacked Spline Area Chart
       How to: Create a 2D Stock Chart
       How to: Create a 2D Step Area Chart
       How to: Create a 2D Step Line Chart
       How to: Create a 2D Scatter Polar Line Chart
       How to: Create a 2D Scatter Radar Line Chart
     [Expand]3D Chart Types
     [Expand]Providing Data
     [Expand]Data Representation
     [Expand]Chart Elements
     [Expand]Appearance Customization
     [Expand]End-User Interaction
     [Expand]Miscellaneous
    [Expand]Additional Resources
   [Expand]Chart3D Control
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Tree List
  [Expand]Gauge Controls
  [Expand]Map Control
  [Expand]Layout Management
  [Expand]Windows Modern UI
  [Expand]Printing-Exporting
  [Expand]Data Editors
  [Expand]Navigation Controls
  [Expand]Spell Checker
  [Expand]Property Grid
  [Expand]PDF Viewer
  [Expand]TreeMap Control
  [Expand]Gantt Control
  [Expand]Diagram Control
  [Expand]Windows and Utility Controls
   Dialogs, Notifications and Panels
  [Expand]Scheduler (legacy)
 [Expand]Scaffolding Wizard
 [Expand]Localization
  Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

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

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

Create a ChartControl (see ChartControl) and specify its ChartControl.Diagram property to a SimpleDiagram2D (see 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 (see PointSeries2D) 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:

The PieSeries2D.Model property allows you to change the series appearance using the built-in models. This example uses the GlarePie2DModel (see 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.

Note

A complete sample project is available at GitHub.

Is this topic helpful?​​​​​​​