10 Features of WinUI Circular Charts That Make It Appealing
Detailed Blog page Skeleton loader
10 Features of WinUI Circular Charts That Makes It More Appealing

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 control provides over 20 popular and widely used chart types, like line, column, area, and circular. 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 are user-friendly chart types that provide better UI visualization of data. These charts are classified into two types: pie charts and doughnut charts (also spelled donut).

Pie chart

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

WinUI Pie Chart
WinUI Pie Chart

To render a pie chart, create an instance of the PieSeries and add it to the series collection property of the SfCircularChart.

Refer to the following XAML code.

<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
WinUI Doughnut Chart

To render a doughnut chart, create an instance of the DoughnutSeries and add it to the Series collection property of the SfCircularChart. Refer to the following XAML code.

<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
  2. Multilevel chart
  3. Semicircular chart
  4. Exploded segments
  5. Grouping small data points into others category
  6. Smart data label
  7. Tooltip
  8. Selection
  9. Animation
  10. UI styling

1. Legend

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

<chart:SfCircularChart>
   <chart:SfCircularChart.Legend>
       <chart:ChartLegend />                              
   </chart:SfCircularChart.Legend>
</chart:SfChart>
Legends in WinUI Pie Chart
Legends in WinUI Pie Chart

2. Multilevel circular chart

A multilevel circular chart 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.

<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
WinUI Multilevel Donut Chart

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
WinUI Semi-Doughnut Chart

Note: For more details, refer to the WinUI Semi-Pie Chart and  Semi-Doughnut Chart documentation.

4. Exploded segments

An exploded segment in a circular chart 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
Exploded Segment in WinUI Pie Chart

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. We can easily achieve this using the GroupTo and GroupMode properties.

Grouping Data Points in WinUI Doughnut Chart
Grouping Data Points in WinUI Doughnut Chart

6. Smart data labels

In our WinUI circular charts, you can smartly arrange data labels to avoid overlapping when the data points fall close together.

Smart Data Labels Support in WinUI Doughnut Chart
Smart Data Label Support in WinUI Doughnut Chart

7. Tooltip

The tooltip displays a pop-up with additional information when the mouse hovers over a data point.

Tooltips in WinUI Doughnut Chart
Tooltips in WinUI Doughnut Chart

8. Selection

This feature allows the users to interactively select 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
Selecting Data Points in WinUI Doughnut Chart

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
Animated WinUI Doughnut Chart

10. UI Styling customization

Customization is one of the significant features of any data visualization control. You can customize the look and feel of the WinUI circular charts using the built-in APIs.

Customizing the Appearance of WinUI Doughnut Chart
Customizing the Appearance of WinUI Doughnut Chart

References

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

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 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 forumfeedback portal, or support portal. We are always happy to assist you!

Related blogs

Be the first to get updates

Karthikeyan V

Meet the Author

Karthikeyan V

Karthikeyan Viswanathan is a Product Manager for Data Visualization and Tools products at Syncfusion. He has been a .NET developer since 2012, working on the custom control development for Microsoft technologies.