diff --git a/knowledge-base/control-spacing-legend-icon-text-maui-chart.md b/knowledge-base/control-spacing-legend-icon-text-maui-chart.md new file mode 100644 index 00000000..da1ab738 --- /dev/null +++ b/knowledge-base/control-spacing-legend-icon-text-maui-chart.md @@ -0,0 +1,164 @@ +--- +title: Adjusting Spacing Between Legend Icon and Text in Telerik UI for .NET MAUI Pie Chart +description: Learn how to control the spacing between the legend icon and text in the Pie Chart of Telerik UI for .NET MAUI. +type: how-to +page_title: Control Spacing Between Legend Icon and Text in .NET MAUI Chart +meta_title: Control Spacing Between Legend Icon and Text in .NET MAUI Chart +slug: control-spacing-legend-icon-text-maui-chart +tags: chart, ui for .net maui, legend, spacing, collectionview +res_type: kb +--- + +## Environment + +| Version | Product | Author | +| --- | --- | ---- | +| 11.1.0 | Telerik UI for .NET MAUI Chart | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova) | + +## Description + +I want to control the spacing between the legend icon and the legend text when using the [Pie Chart](https://www.telerik.com/maui-ui/documentation/controls/chart/types/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 legend spacing in Charts? +- How to adjust legend appearance in .NET MAUI Chart? + +## Solution + +To control the spacing between the legend icon and text, use the Telerik 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 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +4. Bind the legend items to the `RadCollectionView` in the code-behind. + +```csharp +public partial class MainPage : ContentPage +{ + private readonly ObservableCollection 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)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 Data { get; set; } + + public ViewModel() + { + this.Data = GetCategoricalData(); + } + + private static ObservableCollection GetCategoricalData() + { + return new ObservableCollection + { + 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](https://www.telerik.com/maui-ui/documentation/controls/chart/series/pie/pie-series)