How to Show the "others” category values in WinUI Pie Chart data label?

This article explains how to display data labels for the “Others” category values in a circular pie chart using the WinUI Circular Chart.

The ContentTemplate property allows you to customize the data labels of the pie chart. This can be achieved using the Context property with an IValueConverter. To include the data label in the “Others” category, the GroupTo and GroupMode properties are used within the CircularSeries. The following example demonstrates how to show the data label of a pie chart in the “Others” category in the SfCircularChart.

The following XAML configuration defines the layout and styling of the SfCircularChart, including PieSeries with data label customization. This code connects the data source to its visual representation on the chart.

[Xaml]

<Grid>
…
        <Grid.Resources>
            <local:DataLabelXValueConverter x:Key="dataLabelXValue"/>
            <local:DataLabelYValueConverter x:Key="dataLabelYValue"/>
            <DataTemplate x:Key="dataLabelTemplate">
                <StackPanel BorderBrush="Black" BorderThickness="1" 
                                        CornerRadius="2"   Orientation="Horizontal">
                    <TextBlock Foreground="Black" FontWeight="Bold" 
                               Text="{Binding Converter={StaticResource dataLabelXValue}}"/>
                    <TextBlock Text=":  " Foreground="Black" FontWeight="Bold"/>
                    <TextBlock Foreground="Black" FontWeight="Bold" 
                               Text="{Binding Converter={StaticResource dataLabelYValue}}"/>
                </StackPanel>
            </DataTemplate>
        </Grid.Resources>
      <chart:SfCircularChart>
            <chart:PieSeries XBindingPath="Product"  ShowDataLabels="True" Radius="0.7"
                             GroupTo="10" GroupMode="Percentage" YBindingPath="SalesPercentage"
                             ItemsSource="{Binding Data}">
                <chart:PieSeries.DataLabelSettings>   
                    <chart:CircularDataLabelSettings ShowConnectorLine="True" Context="DataLabelItem" 
                                                     Position="OutsideExtended" UseSeriesPalette="True" 
                                                     ContentTemplate="{StaticResource dataLabelTemplate}"/>
                </chart:PieSeries.DataLabelSettings>
            </chart:PieSeries>
      </chart:SfCircularChart>
    </Grid>

C# code below implements the IValueConverter interface for transforming data points into labels, focusing on handling the “Others” category. These converters dynamically adjust the label content based on data conditions.

[C#]

public class DataLabelXValueConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, string language)
        {
            ChartDataLabel pieAdornment = value as ChartDataLabel;
            if(pieAdornment.Item is List<object>)
            {
                return "Others";
            }
            else if ((pieAdornment.Item as Model).Product != null)
            {

                return string.Format((pieAdornment.Item as Model).Product.ToString());

            }
            else
                return null;
        }

        public object ConvertBack(object value, Type targetType, object parameter, string language)
        {
            return value;
        }
    }

    public class DataLabelYValueConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, string language)
        {
            ChartDataLabel pieAdornment = value as ChartDataLabel;
            if (pieAdornment.Item is List<object>)
            {
                var data = pieAdornment.Item as List<object>;
                var yValue = data.Sum(item => (item as Model).SalesPercentage);
                return yValue.ToString("P0");
            }
            else if (!double.IsNaN((pieAdornment.Item as Model).SalesPercentage))
            {

                return (pieAdornment.Item as Model).SalesPercentage.ToString("P0");

            }
            else
                return null;
        }

        public object ConvertBack(object value, Type targetType, object parameter, string language)
        {
            return value;
        }
    }

Output

For further insights, visit our GitHub sample.

Conclusion
I hope you enjoyed learning about how to show the "others” category values in WinUI Pie Chart data label.

You can refer to our WinUI Circular Chart feature tour page to know about its other groundbreaking feature representations. You can also explore our WinUI Circular Chart documentation to understand how to present and manipulate data.

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

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