Adjusting the Spacing Between Legend Icon and Text in Telerik UI for .NET MAUI Pie Chart

Updated on Nov 20, 2025

Environment

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

Description

I want to control the spacing between the legend icon and the legend text when using the Pie Chart in Telerik UI for .NET MAUI. By default, the icons and text appear very close together.

This knowledge base article also answers the following questions:

• How to customize the legend layout in Telerik UI for .NET MAUI Chart?
• How to use CollectionView for controlling the legend spacing in Charts?
• How to adjust the legend appearance in .NET MAUI Chart?

Solution

To control the spacing between the legend icon and text, use the Telerik UI for .NET MAUI CollectionView and define a custom layout for the legend. Follow these steps:

1. Add a RadCollectionView to your layout and configure its ItemsLayout with the desired spacing using CollectionViewLinearLayout.

2. Define a custom ItemTemplate in the RadCollectionView.

3. Use a HorizontalStackLayout with the Spacing property to control the distance between the legend icon and text.

   xaml

   <ContentPage.Resources>
       <ResourceDictionary>
           <Style TargetType="telerik:RadCollectionViewItemView">
               <Setter Property="BorderThickness" Value="0" />
               <Setter Property="BorderColor" Value="Transparent" />
           </Style>
       </ResourceDictionary>
   </ContentPage.Resources>
   
   <Grid RowDefinitions="400,100">
       <telerik:RadPieChart x:Name="chartTest" Loaded="ChartTest_OnLoaded">
           <telerik:RadPieChart.Palette>
               <telerik:ChartPalette>
                   <telerik:ChartPalette.Entries>
                       <telerik:PaletteEntry FillColor="#4FB6E7" StrokeColor="#4FB6E7" />
                       <telerik:PaletteEntry FillColor="#A666CE" StrokeColor="#A666CE" />
                       <telerik:PaletteEntry FillColor="#9DCC00" StrokeColor="#9DCC00" />
                   </telerik:ChartPalette.Entries>
               </telerik:ChartPalette>
           </telerik:RadPieChart.Palette>
           <telerik:RadPieChart.Series>
               <telerik:PieSeries ShowLabels="True" RadiusFactor="0.8" ValueBinding="Value" ItemsSource="{Binding Data}" />
           </telerik:RadPieChart.Series>
       </telerik:RadPieChart>
   
       <telerik:RadCollectionView SelectionMode="None" x:Name="LegendItemsControl" Grid.Row="1">
           <telerik:RadCollectionView.ItemsLayout>
               <telerik:CollectionViewLinearLayout Orientation="Horizontal" ItemSpacing="15" />
           </telerik:RadCollectionView.ItemsLayout>
           <telerik:RadCollectionView.ItemTemplate>
               <DataTemplate x:DataType="local:LegendItem">
                   <HorizontalStackLayout Spacing="15">
                       <telerik:RadBorder BackgroundColor="{Binding SeriesPaletteEntry.FillColor}" WidthRequest="40" HeightRequest="40" />
                       <Label Text="{Binding SeriesDisplayName}" FontSize="12" VerticalOptions="Center" FontAttributes="Bold" />
                   </HorizontalStackLayout>
               </DataTemplate>
           </telerik:RadCollectionView.ItemTemplate>
       </telerik:RadCollectionView>
   </Grid>

4. Bind the legend items to the RadCollectionView in the code-behind.

   csharp

   public partial class MainPage : ContentPage
   {
       private readonly ObservableCollection<LegendItem> legendItems = new();
       
       public MainPage()
       {
           InitializeComponent();
           this.BindingContext = new ViewModel();
           this.LegendItemsControl.ItemsSource = legendItems;
       }
   
       private void ChartTest_OnLoaded(object sender, EventArgs e)
       {
           foreach (var series in chartTest.Series)
           {
               var source = (ObservableCollection<CategoricalData>)series.ItemsSource;
               foreach (var item in source)
               {
                   var displayName = item.Category;
                   var colorIndex = source.IndexOf(item) % chartTest.Palette.Entries.Count;
                   this.legendItems.Add(new LegendItem
                   {
                       SeriesPaletteEntry = chartTest.Palette.Entries[colorIndex],
                       SeriesDisplayName = displayName.ToString(),
                   });
               }
           }
       }
   }

5. Add a sample ViewModel, DataItem and LegendItem.

   csharp

   public class ViewModel
   {
       public ObservableCollection<CategoricalData> Data { get; set; }
   
       public ViewModel()
       {
           this.Data = GetCategoricalData();
       }
   
       private static ObservableCollection<CategoricalData> GetCategoricalData()
       {
           return 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 },
           };
       }
   }
   
   public class CategoricalData
   {
       public object Category { get; set; }
       public double Value { get; set; }
   }
   
   public class LegendItem : NotifyPropertyChangedBase
   {
       private string seriesDisplayName;
       private PaletteEntry seriesPaletteEntry;
   
       public PaletteEntry SeriesPaletteEntry
       {
           get => seriesPaletteEntry;
           set => UpdateValue(ref seriesPaletteEntry, value);
       }
   
       public string SeriesDisplayName
       {
           get => seriesDisplayName;
           set => UpdateValue(ref seriesDisplayName, value);
       }
   }

See Also

• Pie Series