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.

Steps 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:SfChart>
. . . 

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

. . .
</chart:SfChart> 

Step 3: Enable Data Label

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

[XAML]

<chart:SfChart>
. . . 

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

. . .
</chart:SfChart> 

Note: To display both the X and Y values in the data labels, set the SegmentLabelContent property to LabelContentPath. This ensures that the labels reflect the bound data accurately.

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> 
<chart:SfChart>
. . . 

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:SfChart>
. . . 

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

. . .
</chart:SfChart> 

Output

Troubleshooting

Path too long exception

If you are facing a path too long exception when building this example project, close Visual Studio and rename the repository to a shorter name before building the project.

For more details, refer to the KB on how to show adornment labels for grouped values in Syncfusion WPF Circular chart control?.