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:

Answer 2

I ended up emailing Syncfusion directly and they informed me there is no built-in solution for this problem. However you can override the DrawDatalabel function to achieve the same result as seen here:

public class DoughnutSeriesExt : DoughnutSeries

{
    protected override void DrawDataLabel(ICanvas canvas, Brush fillcolor, string label, PointF point, int index)
    {
        double totalValues = 0;
        foreach (var item in this.ItemsSource as ObservableCollection<Model>)
        {
            totalValues += item.Count;
        }

        var currentDataPoint = Double.Parse(label.Replace("%", ""));
        label = ValueToPercentage.Converter(currentDataPoint, totalValues);
        base.DrawDataLabel(canvas, fillcolor, label, point, index);
    }
}

internal static class ValueToPercentage
{
    public static string Converter(double value, double totalValue)
    {
        return Math.Round(value / totalValue * 100, 2) + "%";
    }
}