How to change the Data Label of Syncfusion's .NET MAUI SfCircularChart to display as a percentage of the slice size?

Question

I have not found a property like LabelContent that can be set to Percentage which I believe is available in Xamarin? I also tried playing around with the LabelFormat property but there's no documentation showing examples that I've found online for .NET MAUI. The only mention of it being possible is at the bottom of this page but it doesn't show how it was done.

Answer 1

This can be achieved by setting LabelFormat="0'%" of the ChartDataLabelStyle like below:

<chart:SfCircularChart>
      
            <chart:SfCircularChart.Series>
                <chart:PieSeries ItemsSource="{Binding Data}" ShowDataLabels="True" 
                                    XBindingPath="Country" 
                                    YBindingPath="Counts">
                    <chart:PieSeries.DataLabelSettings>
                        <chart:CircularDataLabelSettings>
                            <chart:CircularDataLabelSettings.LabelStyle>
                                <chart:ChartDataLabelStyle LabelFormat="0'%"/>
                            </chart:CircularDataLabelSettings.LabelStyle>
                        </chart:CircularDataLabelSettings>
                    </chart:PieSeries.DataLabelSettings>
                </chart:PieSeries>
            </chart:SfCircularChart.Series>
 </chart:SfCircularChart>

Below is the step you can refer to：

#1: Install the Syncfusion.Maui.Charts.

#2: Register the handler in MauiProgram.cs:

 public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
            .UseMauiApp<App>()
             //add this line
            .ConfigureSyncfusionCore()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            });

            return builder.Build();
        }

#3:

MainPage.xaml:

<?xml version="1.0" encoding="utf-8" ?> 
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiAppChart.MainPage"
               xmlns:chart="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts" 
             xmlns:viewModel ="clr-namespace:MauiAppChart.ViewModel"
             >

    <Grid HorizontalOptions="FillAndExpand" Padding="20" BackgroundColor="White" VerticalOptions="FillAndExpand">
        <chart:SfCircularChart>
            <chart:SfCircularChart.BindingContext>
                <viewModel:ViewModel/>
            </chart:SfCircularChart.BindingContext>
            <chart:SfCircularChart.Legend>
                <chart:ChartLegend Placement="Right" />
            </chart:SfCircularChart.Legend>
            <chart:SfCircularChart.Title>
                <Label Text="Rural population of various countries" FontSize="Large" Margin="5,10,5,10" HorizontalTextAlignment="Center" HorizontalOptions="FillAndExpand"></Label>
            </chart:SfCircularChart.Title>
            <chart:SfCircularChart.Series>
                <chart:PieSeries ItemsSource="{Binding Data}" ShowDataLabels="True"
                                    XBindingPath="Country" 
                                    YBindingPath="Counts">
                    <chart:PieSeries.DataLabelSettings>
                        <chart:CircularDataLabelSettings>
                            <chart:CircularDataLabelSettings.LabelStyle>
                                <chart:ChartDataLabelStyle LabelFormat="0'%"/>
                            </chart:CircularDataLabelSettings.LabelStyle>
                        </chart:CircularDataLabelSettings>
                    </chart:PieSeries.DataLabelSettings>
                </chart:PieSeries>
            </chart:SfCircularChart.Series>
        </chart:SfCircularChart>
    </Grid>

</ContentPage>

#4:

ViewModel.cs:

using System; 
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace MauiAppChart.ViewModel
{
    public class ViewModel
    {
        public ObservableCollection<Model> Data { get; set; }
        public ObservableCollection<Brush> CustomBrushes { get; set; }
        public ViewModel()
        {
            Data = new ObservableCollection<Model>()
            {
                new Model("Algeria", 28),
                new Model("Australia", 14),
                new Model("Bolivia", 31),
                new Model("Cambodia", 77),
                new Model("Canada", 19),
            };

            CustomBrushes = new ObservableCollection<Brush>()
            {
               new SolidColorBrush(Color.FromArgb("#314A6E")),
                 new SolidColorBrush(Color.FromArgb("#48988B")),
                 new SolidColorBrush(Color.FromArgb("#5E498C")),
                 new SolidColorBrush(Color.FromArgb("#74BD6F")),
                 new SolidColorBrush(Color.FromArgb("#597FCA"))
            };
        }
    }


    public class Model
    {
        public string Country { get; set; }

        public double Counts { get; set; }

        public Model(string name, double count)
        {
            Country = name;
            Counts = count;
        }
    }
}

The Output: