New to Telerik UI for .NET MAUI? Start a free 30-day trial

Customizing Labels in the Pie Chart


Version Product Author
6.7.0 Telerik UI for .NET MAUI Chart Dobrinka Yordanova


How can I customize the labels in the Pie Chart, for example, set the text color, font size, an so on?


To customize the labels in the Pie Chart, use the native Pie Chart for Android, iOS, or WinUI.

1. Add sample model and view model:

public class CategoricalData
    public object Category { get; set; }
    public double Value { get; set; }

public class ViewModel
    public ObservableCollection<CategoricalData> Data { get; set; }

    public ViewModel()
        this.Data = GetCategoricalData();

    private static ObservableCollection<CategoricalData> GetCategoricalData()
        var data = new ObservableCollection<CategoricalData>
        new CategoricalData { Category = "Greenings", Value = 52 },
        new CategoricalData { Category = "Perfecto", Value = 19 },
        new CategoricalData { Category = "NearBy", Value = 82 },
        new CategoricalData { Category = "Family", Value = 23 },
        new CategoricalData { Category = "Fresh", Value = 56 },
        return data;

2. Define the Pie Chart in XAML:

<Grid RowDefinitions="*">
    <telerik:RadPieChart x:Name="chart" 
            <local:ViewModel />
            <telerik:PieSeries ShowLabels="True"
                        ValueBinding="Value" LabelFormat="C"
                        ItemsSource="{Binding Data}" />

3. Subscribe to the HandlerChanged event:

private void chart_HandlerChanged(object sender, EventArgs e)

4. And inside the UpdateChart() method, implement the custom logic for accessing the native Android, iOS, or WinUI Chart and customize the labels of the PieSeries:

private void UpdateChart()
    var platformView = this.chart.Handler.PlatformView;
    var platformChart = (Telerik.UI.Xaml.Controls.Chart.RadPieChart)platformView;
    var series = platformChart.Series[0];
    // Remove the default labels.
    // Add a custom label with a custom template.
    series.LabelDefinitions.Add(new Telerik.UI.Xaml.Controls.Chart.ChartSeriesLabelDefinition
        // The label template definition is added inside the Platforms/Windows/App.xaml file: 
        LabelTemplate = MauiWinUIApplication.Current.Resources["CustomLabelTemplate"] as Microsoft.UI.Xaml.DataTemplate


    var platformChart = (Com.Telerik.Widget.Chart.Visualization.PieChart.RadPieChartView)platformView;
    var series = platformChart.Series.ToArray()?.FirstOrDefault() as Com.Telerik.Widget.Chart.Visualization.PieChart.PieSeries;
    if(series != null) 
        // To remove the percentage, set the following format:
        series.LabelFormat = "%.2f";

        // Then, draw a new label and further customize it inside the CustomPieSeriesLabelRenderer class (Platforms/Android folder).
        series.LabelRenderer = new Platforms.Android.CustomPieSeriesLabelRenderer(series);

    var platformChart = (Telerik.Maui.Controls.Compatibility.ChartRenderer.iOS.TKExtendedChart)platformView;
    // Render a new label using the Delegate.
    platformChart.Delegate = new Platforms.iOS.MyChartDelegate(this.chart);

5. For WinUI, add the label template definition inside the Platforms/Windows/App.xaml file:

    <DataTemplate x:Key="CustomLabelTemplate">
            <!-- You can apply color, font size, and other properties available for the TextBlock element. --> 
            <TextBlock Text="{Binding DataItem.Value}" FontSize="30" Foreground="Red" />

6. For Android, create a class CustomPieSeriesLabelRenderer inside the Platforms/Android folder. This class is used for native label rendering:

using Android.Graphics;
using Android.Runtime;
using Com.Telerik.Widget.Chart.Engine.ElementTree;
using Com.Telerik.Widget.Chart.Visualization.PieChart;
using Color = Android.Graphics.Color;
using Paint = Android.Graphics.Paint;
using Path = Android.Graphics.Path;

namespace MauiApp1.Platforms.Android
    class CustomPieSeriesLabelRenderer : PieSeriesLabelRenderer
        private readonly Paint strokePaint = new Paint();

        protected CustomPieSeriesLabelRenderer(IntPtr javaReference, JniHandleOwnership transfer)
            : base(javaReference, transfer)


        public CustomPieSeriesLabelRenderer(Com.Telerik.Widget.Chart.Visualization.PieChart.PieSeries p0)
            : base(p0)

        public override void RenderLabel(Canvas canvas, ChartNode node)
            this.strokePaint.Color = Color.Transparent;
            LabelStrokePaint = strokePaint;
            this.LabelTextColor = Color.Black;
            base.RenderLabel(canvas, node);

        protected override void DrawLabelText(Canvas canvas, string text, float p2, float p3)
            base.DrawLabelText(canvas, text, p2, p3);

        protected override void DrawLabelBackground(Canvas canvas, Path path, int p2)
            base.DrawLabelBackground(canvas, path, p2);

        protected override Paint GetLabelFillPaint(int p0)
            return base.GetLabelFillPaint(p0);

7. For iOS and MacCatalyst, render a new label using a delegate. Create a class MyChartDelegate inside the Platforms/iOS and Platforms/MacCatalyst folders:

using Telerik.Maui.Controls.Compatibility.Chart;
using TelerikUI;
using UIKit;

namespace MauiApp1.Platforms.iOS
    public class MyChartDelegate : Telerik.Maui.Controls.Compatibility.ChartRenderer.iOS.PieChartDelegate
        public MyChartDelegate(RadPieChart chart) : base(chart)
        public override TKChartPointLabel LabelForDataPoint(TKChart chart, TKChartData dataPoint, string propertyName, TKChartSeries series, nuint dataIndex)
            TKChartDataPoint chartDataPoint = (TKChartDataPoint)dataPoint;
            return new MyChartPointLabel(chartDataPoint, series, chartDataPoint.DataXValue.ToString());

    public class MyChartPointLabel : TKChartPointLabel
        public MyChartPointLabel(TKChartDataPoint point, TKChartSeries series, string text) : base(point, series, text)
            this.Style.TextColor = UIColor.White;
In this article