Skip to content

Commit 07f850c

Browse files
author
KB Bot
committed
Added new kb article control-spacing-legend-icon-text-maui-chart
1 parent ce25b69 commit 07f850c

File tree

1 file changed

+164
-0
lines changed

1 file changed

+164
-0
lines changed

‎knowledge-base/control-spacing-legend-icon-text-maui-chart.md‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
---
2+
title: Adjusting Spacing Between Legend Icon and Text in Telerik UI for .NET MAUI Pie Chart
3+
description: Learn how to control the spacing between the legend icon and text in the Pie Chart of Telerik UI for .NET MAUI.
4+
type: how-to
5+
page_title: Control Spacing Between Legend Icon and Text in .NET MAUI Chart
6+
meta_title: Control Spacing Between Legend Icon and Text in .NET MAUI Chart
7+
slug: control-spacing-legend-icon-text-maui-chart
8+
tags: chart, ui for .net maui, legend, spacing, collectionview
9+
res_type: kb
10+
---
11+
12+
## Environment
13+
14+
| Version | Product | Author |
15+
| --- | --- | ---- |
16+
| 11.1.0 | Telerik UI for .NET MAUI Chart | [Dobrinka Yordanova](https://www.telerik.com/blogs/author/dobrinka-yordanova) |
17+
18+
## Description
19+
20+
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.
21+
22+
This knowledge base article also answers the following questions:
23+
24+
- How to customize the legend layout in Telerik UI for .NET MAUI Chart?
25+
- How to use CollectionView for controlling legend spacing in Charts?
26+
- How to adjust legend appearance in .NET MAUI Chart?
27+
28+
## Solution
29+
30+
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:
31+
32+
1. Add a `RadCollectionView` to your layout and configure its `ItemsLayout` with the desired spacing using `CollectionViewLinearLayout`.
33+
2. Define a custom `ItemTemplate` in the `RadCollectionView`.
34+
3. Use a `HorizontalStackLayout` with the `Spacing` property to control the distance between the legend icon and text.
35+
36+
```xaml
37+
<ContentPage.Resources>
38+
<ResourceDictionary>
39+
<Style TargetType="telerik:RadCollectionViewItemView">
40+
<Setter Property="BorderThickness" Value="0" />
41+
<Setter Property="BorderColor" Value="Transparent" />
42+
</Style>
43+
</ResourceDictionary>
44+
</ContentPage.Resources>
45+
46+
<Grid RowDefinitions="400,100">
47+
<telerik:RadPieChart x:Name="chartTest" Loaded="ChartTest_OnLoaded">
48+
<telerik:RadPieChart.Palette>
49+
<telerik:ChartPalette>
50+
<telerik:ChartPalette.Entries>
51+
<telerik:PaletteEntry FillColor="#4FB6E7" StrokeColor="#4FB6E7" />
52+
<telerik:PaletteEntry FillColor="#A666CE" StrokeColor="#A666CE" />
53+
<telerik:PaletteEntry FillColor="#9DCC00" StrokeColor="#9DCC00" />
54+
</telerik:ChartPalette.Entries>
55+
</telerik:ChartPalette>
56+
</telerik:RadPieChart.Palette>
57+
<telerik:RadPieChart.Series>
58+
<telerik:PieSeries ShowLabels="True" RadiusFactor="0.8" ValueBinding="Value" ItemsSource="{Binding Data}" />
59+
</telerik:RadPieChart.Series>
60+
</telerik:RadPieChart>
61+
62+
<telerik:RadCollectionView SelectionMode="None" x:Name="LegendItemsControl" Grid.Row="1">
63+
<telerik:RadCollectionView.ItemsLayout>
64+
<telerik:CollectionViewLinearLayout Orientation="Horizontal" ItemSpacing="15" />
65+
</telerik:RadCollectionView.ItemsLayout>
66+
<telerik:RadCollectionView.ItemTemplate>
67+
<DataTemplate x:DataType="local:LegendItem">
68+
<HorizontalStackLayout Spacing="15">
69+
<telerik:RadBorder BackgroundColor="{Binding SeriesPaletteEntry.FillColor}" WidthRequest="40" HeightRequest="40" />
70+
<Label Text="{Binding SeriesDisplayName}" FontSize="12" VerticalOptions="Center" FontAttributes="Bold" />
71+
</HorizontalStackLayout>
72+
</DataTemplate>
73+
</telerik:RadCollectionView.ItemTemplate>
74+
</telerik:RadCollectionView>
75+
</Grid>
76+
```
77+
78+
4. Bind the legend items to the `RadCollectionView` in the code-behind.
79+
80+
```csharp
81+
public partial class MainPage : ContentPage
82+
{
83+
private readonly ObservableCollection<LegendItem> legendItems = new();
84+
85+
public MainPage()
86+
{
87+
InitializeComponent();
88+
this.BindingContext = new ViewModel();
89+
this.LegendItemsControl.ItemsSource = legendItems;
90+
}
91+
92+
private void ChartTest_OnLoaded(object sender, EventArgs e)
93+
{
94+
foreach (var series in chartTest.Series)
95+
{
96+
var source = (ObservableCollection<CategoricalData>)series.ItemsSource;
97+
foreach (var item in source)
98+
{
99+
var displayName = item.Category;
100+
var colorIndex = source.IndexOf(item) % chartTest.Palette.Entries.Count;
101+
this.legendItems.Add(new LegendItem
102+
{
103+
SeriesPaletteEntry = chartTest.Palette.Entries[colorIndex],
104+
SeriesDisplayName = displayName.ToString(),
105+
});
106+
}
107+
}
108+
}
109+
}
110+
```
111+
112+
5. Add a sample `ViewModel`, `DataItem` and `LegendItem`:
113+
114+
```csharp
115+
public class ViewModel
116+
{
117+
public ObservableCollection<CategoricalData> Data { get; set; }
118+
119+
public ViewModel()
120+
{
121+
this.Data = GetCategoricalData();
122+
}
123+
124+
private static ObservableCollection<CategoricalData> GetCategoricalData()
125+
{
126+
return new ObservableCollection<CategoricalData>
127+
{
128+
new CategoricalData { Category = "Greenings", Value = 52 },
129+
new CategoricalData { Category = "Perfecto", Value = 19 },
130+
new CategoricalData { Category = "NearBy", Value = 82 },
131+
new CategoricalData { Category = "Family", Value = 23 },
132+
new CategoricalData { Category = "Fresh", Value = 56 },
133+
};
134+
}
135+
}
136+
137+
public class CategoricalData
138+
{
139+
public object Category { get; set; }
140+
public double Value { get; set; }
141+
}
142+
143+
public class LegendItem : NotifyPropertyChangedBase
144+
{
145+
private string seriesDisplayName;
146+
private PaletteEntry seriesPaletteEntry;
147+
148+
public PaletteEntry SeriesPaletteEntry
149+
{
150+
get => seriesPaletteEntry;
151+
set => UpdateValue(ref seriesPaletteEntry, value);
152+
}
153+
154+
public string SeriesDisplayName
155+
{
156+
get => seriesDisplayName;
157+
set => UpdateValue(ref seriesDisplayName, value);
158+
}
159+
}
160+
```
161+
162+
## See Also
163+
164+
- [Pie Series](https://www.telerik.com/maui-ui/documentation/controls/chart/series/pie/pie-series)

0 commit comments

Comments
 (0)