How to show adornment labels for grouped values in WPF Circular Chart?

This article explains how to display adornment labels for grouped values in a Syncfusion WPF Circular Chart. Grouped segments are created using the GroupTo property, and labels are customized using converters and templates to show multiple data points in a single label.

For more details, refer to the Group To documentation in Syncfusion UG.

The following steps explain how to display and customize adornment labels for grouped values:

Step 1: Getting Started

Let’s configure the Syncfusion® WPF Circular Chart control using this getting started documentation. This section guides you through the initial configuration steps required to integrate the chart control using Syncfusion’s WPF NuGet packages.

Step 2: Add PieSeries to the Chart

Define the PieSeries inside the SfChart control and bind it to your data source, and need to specify the GroupTo property, which determines the threshold value for grouping smaller data points. In the example below, data points with values less than 1000 are grouped together.

XAML

<chart:PieSeries x:Name="pieSeries"
                ItemsSource="{Binding Data}"
                XBindingPath="Product"
                YBindingPath="SalesRate"
                GroupMode="Value"
                GroupTo="1000"
</chart:PieSeries> 

Step 3: Enable Data Label

Use ChartAdornmentInfo to show labels and connector lines. For more details, refer to the Adornments UG Documentation.

XAML

<chart:PieSeries.AdornmentsInfo>
   <chart:ChartAdornmentInfo ShowConnectorLine="True" 
                             ConnectorHeight="80" 
                             ShowLabel="True"  
                             SegmentLabelContent="LabelContentPath">
   </chart:ChartAdornmentInfo>
</chart:PieSeries.AdornmentsInfo> 

Step 4: Define the Custom Data Label Template

Next, we create a custom data label template called “customDataLabelTemplate”. This template uses a vertical stack layout to format the label content.

XAML

<Window.Resources>
   <DataTemplate x:Key="customDataLabelTemplate">
       <StackPanel Orientation="Vertical" Margin="5">
           <TextBlock Text="{Binding Converter={StaticResource DataLabelConverter}}"                          
                      Margin="3" Foreground="White">
           </TextBlock>
       </StackPanel>
   </DataTemplate>
</Window.Resources> 

Step 5: Implement Converters

This converter formats pie chart labels by extracting and displaying product names and their sales rate. It handles both single ProductSales items and grouped collections, returning a readable label string for each chart segment.

C#

public class DataLabelTemplateConverter : IValueConverter
{
   public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
   {
       if (value is ChartPieAdornment adornment)
      {
           // Case 1: Single item
           if (adornment.Item is ProductSales model)
           {
               return $"{model.Product} : {model.SalesRate}";
           }
           // Case 2: Grouped items (e.g., List<ProductSales>)
           else if (adornment.Item is IEnumerable<object> group)
           {
               var lines = new List<string>();
               foreach (var item in group)
               {
                   if (item is ProductSales product)
                   {
                       lines.Add($"{product.Product} : {product.SalesRate}");
                   }
               }
               return string.Join("\n", lines);
           }
      }

       return value;
   }

   public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
   {
       return value;
   }
} 

Step 6: Integrate Custom Data Label Template with the Chart

Finally, we add the custom data label template to the Circular Chart by setting the LabelTemplate property in the ChartAdornmentInfo class.

XAML

<chart:ChartAdornmentInfo LabelTemplate="{StaticResource customDataLabelTemplate}" /> 

Output:

For more details, please refer to the project on GitHub sample.

Conclusion:

I hope you enjoyed learning how to display and customize adornment labels for grouped values in WPF Circular Chart.

You can refer to our WPF Chart feature tour page know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WPF Chart Examples to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!