10 Features of WinUI Circular Charts That Make It Appealing
Tags: winui, csharp, dotnet, dataviz
Published: 2021-12-15 12:58:57

---
title: 10 Features of WinUI Circular Charts That Make It Appealing
published: true
date: 2021-12-15 11:18:57 UTC
tags: winui, csharp, dotnet, dataviz
canonical_url: https://www.syncfusion.com/blogs/post/10-features-of-winui-circular-charts-that-make-it-appealing.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ynzzzhk217nrxinjg6hd.png
---

When it comes to data analysis and presentation, nothing beats a good chart. Charts visualize complex data in an easily understandable way. The Syncfusion [WinUI Charts](https://www.syncfusion.com/winui-controls/charts "Link to WinUI Charts") control provides over 20 popular and widely used chart types, like [line](https://www.syncfusion.com/winui-controls/charts/winui-line-chart "Link to WinUI Line Charts"), [column](https://www.syncfusion.com/winui-controls/charts/winui-column-chart "Link to WinUI Column Charts"), [area](https://www.syncfusion.com/winui-controls/charts/winui-area-chart "Link to WinUI Area Charts"), and [circular](https://www.syncfusion.com/winui-controls/charts/2d-chart-types#circular-charts "Link to WinUI Circular Charts"). Its rich feature set includes data binding, multiple axes, legends, animations, data labels, tooltip, gradient, zooming, and so on.

First, let’s do a quick overview of our WinUI circular charts.

## WinUI circular charts

The [WinUI circular charts](https://www.syncfusion.com/winui-controls/charts/2d-chart-types#circular-charts "Link to WinUI Circular Charts") are user-friendly chart types that provide better UI visualization of data. These charts are classified into two types: [pie charts](https://www.syncfusion.com/winui-controls/charts/winui-pie-chart "Link to WinUI Pie Chart") and [doughnut charts](https://www.syncfusion.com/winui-controls/charts/winui-doughnut-chart "Link to WinUI Doughnut Chart") (also spelled donut).

### Pie chart

The WinUI pie chart displays the proportions and percentages of different categories.

![WinUI Pie Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2021/12/winui_pie_chart.png)
<figcaption>WinUI Pie Chart</figcaption>

To render a pie chart, create an instance of the [PieSeries](https://help.syncfusion.com/cr/WinUI/Syncfusion.UI.Xaml.Charts.PieSeries.html "Link to the Class PieSeries of WinUI Circular Charts") and add it to the series collection property of the [SfCircularChart](https://help.syncfusion.com/cr/WinUI/Syncfusion.UI.Xaml.Charts.SfCircularChart.html "Link to the Class SfCircularChart").

Refer to the following XAML code.

```html
<chart:SfCircularChart>
      <chart:SfCircularChart.Series>
          <chart:PieSeries ItemsSource="{Binding Data}" XBindingPath="Category" 
                           YBindingPath="Value"/>
      </chart:SfCircularChart.Series>
</chart:SfCircularChart>
```

### Doughnut chart

The WinUI doughnut chart is similar to the pie chart, but with an open space at the center. It is intended for comparing the contribution of each data point to the whole.

![WinUI Doughnut Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2021/12/DoughnutChart_WinUI.png)
<figcaption>WinUI Doughnut Chart</figcaption>

To render a doughnut chart, create an instance of the [DoughnutSeries](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.DoughnutSeries.html "Link to the Class DoughnutSeries of WinUI Circular Charts") and add it to the [Series](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfCircularChart.html#Syncfusion_UI_Xaml_Charts_SfCircularChart_Series "Link to the Series property of WinUI Circular Charts") collection property of the [SfCircularChart](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.SfCircularChart.html "Link to the Class SfCircularChart"). Refer to the following XAML code.

```html
<chart:SfCircularChart>
    <chart:SfCircularChart.Series>
        <chart:DoughnutSeries ItemsSource="{Binding Data}" 
                              XBindingPath="Product" 
                              YBindingPath="SalesRate" />
    </chart:SfCircularChart.Series>
</chart:SfCircularChart>
```

Now, let’s explore the top 10 features of these WinUI circular charts:

1. [Legend](#legend)
2. [Multilevel chart](#multilevel-circular-chart)
3. [Semicircular chart](#semicircular-chart)
4. [Exploded segments](#exploded-segments)
5. [Grouping small data points into others category](#group-small-data-points-into-others-category)
6. [Smart data label](#smart-data-label)
7. [Tooltip](#tooltip)
8. [Selection](#selection)
9. [Animation](#animation)
10. [UI styling](#ui-styling-customization)

## 1. Legend

A [legend](https://help.syncfusion.com/winui/circular-charts/legend "Documentation link to legend in WinUI Circular Charts") provides additional information that helps us to identify the individual slices in a circular chart.

It supports the following options:

- Placement of legend on top, left, right, bottom, and inside the chart area.
- Vertical or horizontal orientation.
- Auto-creation of legend UI and binding to the underlying data model.
- APIs to customize the default UI appearance.
- Templating of legend items.

You can define legends in your WinUI Charts using the following code example.

```html
<chart:SfCircularChart>
   <chart:SfCircularChart.Legend>
       <chart:ChartLegend />                              
   </chart:SfCircularChart.Legend>
</chart:SfChart>
```

![Legends in WinUI Pie Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2021/12/Legends-in-WinUI-Pie-Chart.png)
<figcaption>Legends in WinUI Pie Chart</figcaption>

## 2. Multilevel circular chart

A [multilevel circular chart](https://help.syncfusion.com/winui/circular-charts/doughnutchart#multiple-doughnut "Documentation link to multiple Doughnut Charts") allows users to add multiple series in a single chart. Usually, the donut chart has different categories of data slices. A multilevel donut chart is used to compare the distribution of category values.

Refer to the following XAML code example.

```html
<chart:SfCircularChart>
      <chart:SfCircularChart.Series>
          <chart:DoughnutSeries ItemsSource="{Binding Data}" XBindingPath="Category" 
                                YBindingPath="Value1"/>
          <chart:DoughnutSeries ItemsSource="{Binding Data}" XBindingPath="Category" 
                                YBindingPath="Value2"/>
          <chart:DoughnutSeries ItemsSource="{Binding Data}" XBindingPath="Category" 
                                YBindingPath="Value2"/>
      </chart:SfCircularChart.Series>
</chart:SfCircularChart >
```

![WinUI Multilevel Donut Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2021/12/winui_multiple_pie.png)
<figcaption>WinUI Multilevel Donut Chart</figcaption>

## 3. Semicircular chart

The main advantage of the semicircle chart is that it takes up half the space of a regular circular chart for the same amount of data displayed. The semi-doughnut chart is also known as a half doughnut chart.

![WinUI Semi-Doughnut Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2021/12/winui_semi_doughnut.png)
<figcaption>WinUI Semi-Doughnut Chart</figcaption>

**Note:** For more details, refer to the [WinUI Semi-Pie Chart](https://help.syncfusion.com/winui/circular-charts/piechart#semi-pie "Documentation link to Semi Pie Chart") and  [Semi-Doughnut Chart documentation](https://help.syncfusion.com/winui/circular-charts/doughnutchart#semi-doughnut "Documentation link to Semi Doughnut Chart").

## 4. Exploded segments

An [exploded segment in a circular chart](https://help.syncfusion.com/winui/circular-charts/explode "Documentation link to explode segments in WinUI Circular Charts") is used to pull attention to a specific slice of the chart. You can change the explosion setting for all slices or specific slices. This can be done either programmatically or through user interaction.

![Exploded Segment in WinUI Pie Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2021/12/winui_exploded_pie.png)
<figcaption>Exploded Segment in WinUI Pie Chart</figcaption>

## 5. Grouping small data points into others category

A chart with a large number of segments can be challenging to decipher. Also, it is difficult to see the smaller segments and apply appropriate colors to distinguish all the segments.

In this scenario, you can [group smaller segments into a single **other** segment](https://help.syncfusion.com/winui/circular-charts/piechart#group-small-data-points-into-others "Documentation link to group small data points into others category in WinUI Pie Chart"). We can easily achieve this using the [GroupTo](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.CircularSeries.html#Syncfusion_UI_Xaml_Charts_CircularSeries_GroupTo "Link to the GroupTo property of WinUI Circular Charts") and [GroupMode](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.CircularSeries.html#Syncfusion_UI_Xaml_Charts_CircularSeries_GroupMode "Link to the GroupMode property of WinUI Circular Charts") properties.

![Grouping Data Points in WinUI Doughnut Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2021/12/winui_grouping_doughnut.png)
<figcaption>Grouping Data Points in WinUI Doughnut Chart</figcaption>

## 6. Smart data labels

In our WinUI circular charts, you can smartly arrange [data labels](https://help.syncfusion.com/winui/circular-charts/datalabels#position "Documentation link to position the labels in WinUI Circular Charts") to avoid overlapping when the data points fall close together.

![Smart Data Labels Support in WinUI Doughnut Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2021/12/Smart-Data-Labels-Support-in-WinUI-Doughnut-Chart.png)
<figcaption>Smart Data Label Support in WinUI Doughnut Chart</figcaption>

## 7. Tooltip

The [tooltip](https://help.syncfusion.com/winui/circular-charts/tooltip "Documentation link to tooltip in WinUI Circular Charts") displays a pop-up with additional information when the mouse hovers over a data point.

![Tooltips in WinUI Doughnut Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2021/12/Tooltips-in-WinUI-Doughnut-Chart.gif)
<figcaption>Tooltips in WinUI Doughnut Chart</figcaption>

## 8. Selection

This feature allows the users to interactively [select](https://help.syncfusion.com/winui/circular-charts/selection "Documentation link to selection in WinUI Circular Charts") and highlight a data point. This is widely used to navigate to another page of information about a selected data point or update other components on the same page based on the selected data point.

![Selecting Data Points in WinUI Doughnut Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2021/12/Selecting-Data-Points-in-WinUI-Doughnut-Chart.gif)
<figcaption>Selecting Data Points in WinUI Doughnut Chart</figcaption>

## 9. Animation

An animated chart, such as the one following, will attract the audience’s attention and direct it to specific points on the graph.

![Animated WinUI Doughnut Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2021/12/Animated-WinUI-Doughnut-Chart.gif)
<figcaption>Animated WinUI Doughnut Chart</figcaption>

## 10. UI Styling customization

Customization is one of the significant features of any data visualization control. You can [customize](https://help.syncfusion.com/winui/circular-charts/appearance "Documentation link to appearance customization in WinUI Circular Charts") the look and feel of the WinUI circular charts using the built-in APIs.

![Customizing the Appearance of WinUI Doughnut Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2021/12/Customizing-the-Appearance-of-WinUI-Doughnut-Chart.png)
<figcaption>Customizing the Appearance of WinUI Doughnut Chart</figcaption>

## References

For more details about the WinUI circular charts, refer to the following links:

- [GitHub demos](https://github.com/syncfusion/winui-demos/tree/master/chart "Link to WinUI Circular Charts GitHub demos")
- [User guide](https://help.syncfusion.com/winui/circular-charts/getting-started "Documentation Link to getting started with WinUI Circular Charts")
- [Examples on Windows Store](https://www.microsoft.com/en-us/p/syncfusion-winui-controls-gallery/9n0fp16ddc06 "Link to the Syncfusion WinUI controls demos on the Windows Store")
- [API documentation](https://help.syncfusion.com/cr/WinUI/Syncfusion.UI.Xaml.Charts.SfCircularChart.html "Link to the Class SfCircularChart")

## Conclusion

Thanks for reading! In this blog post, we have seen the top 10 features of the Syncfusion WinUI circular charts. These chart types support other features, too. Use these vivid features to elegantly design and visualize the data points in your WinUI charts!

If you aren’t a customer yet, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Link to the free evaluation of the Syncfusion Essential Studio") to check out these features.

If you wish to send us feedback or would like to submit any questions, please feel free to post them in the comments section of this blog post. You can also contact us through our [support forum](https://www.syncfusion.com/forums "Link to the Syncfusion support forum"), [feedback portal](https://www.syncfusion.com/feedback "Link to Syncfusion Feedback Portal"), or [support portal](https://support.syncfusion.com/ "Link to the Syncfusion support portal"). We are always happy to assist you!

## Related blogs

- [WinUI 3 Date Picker Control-A Perfect Tool for Date Selection](https://www.syncfusion.com/blogs/post/winui-3-date-picker-control-a-perfect-tool-for-date-selection.aspx "Link to WinUI 3 Date Picker Control-A Perfect Tool for Date Selection blog")
- [WinUI Scheduler: A Smart Tool to Handle Appointments in a Hospital](https://www.syncfusion.com/blogs/post/winui-scheduler-a-smart-tool-to-handle-appointments-in-a-hospital.aspx "Link to WinUI Scheduler: A Smart Tool to Handle Appointments in a Hospital blog")
- [Pick Colors Like a Boss Using Syncfusion Color Controls in WinUI](https://www.syncfusion.com/blogs/post/pick-colors-like-a-boss-using-syncfusion-color-controls-in-winui.aspx "Link to Pick Colors Like a Boss Using Syncfusion Color Controls in WinUI blog")
- [How to Develop a Sleep Tracker in WinUI and Exploring 2021 Volume 3 Updates for WinUI, MAUI, & WPF [Webinar Show Notes]](https://www.syncfusion.com/blogs/post/how-to-develop-a-sleep-tracker-in-winui-and-exploring-2021-volume-3-updates-for-winui-maui-wpf-webinar-show-notes.aspx "Link to How to Develop a Sleep Tracker in WinUI and Exploring 2021 Volume 3 Updates for WinUI, MAUI, & WPF [Webinar Show Notes] blog")