[Solved] RadPieChart Labels Clip Top Bottom Left and Right whe

[Christopher]

RadPieChart needs to reserve space for labels to render on top, bottom, left and right sides of the pie chart. Currently labels are partly or entirely clipped. Need this bug fixed ASAP. We are currently using Telerik charting controls and we have bugs logged to fix the Label clipping issue, but the bug is entirely related to the rendering of the Telerik control. See simple repo sample below.

 

MainPage.xaml

01.<Page
02.    x:Class="TelerikBug.MainPage"
03.    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
04.    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
05.    xmlns:local="using:TelerikBug"
06.    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
07.    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
08.    xmlns:chart="using:Telerik.UI.Xaml.Controls.Chart"
09.    mc:Ignorable="d">
10.
11.    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
12.        <chart:RadPieChart x:Name="PieChart"
15.                         PaletteName="DefaultLight">
16.            <chart:PieSeries ShowLabels="True"
17.                         ItemsSource="{Binding}">
18.                <chart:PieSeries.Transitions>
19.                    <TransitionCollection>
20.                        <ContentThemeTransition HorizontalOffset="0"
21.                                                VerticalOffset="110" />
22.                    </TransitionCollection>
23.                </chart:PieSeries.Transitions>
24.                <chart:PieSeries.LegendTitleBinding>
25.                    <chart:PropertyNameDataPointBinding PropertyName="Key" />
26.                </chart:PieSeries.LegendTitleBinding>
27.                <chart:PieSeries.ValueBinding>
28.                    <chart:PropertyNameDataPointBinding PropertyName="Value" />
29.                </chart:PieSeries.ValueBinding>
30.            </chart:PieSeries>
31.        </chart:RadPieChart>
32.    </Grid>
33.</Page>

MainPage.xaml.cs

01.using System;
02.using System.Collections.Generic;
03.using System.Collections.ObjectModel;
04.using System.IO;
05.using System.Linq;
06.using System.Runtime.InteropServices.WindowsRuntime;
07.using Windows.Foundation;
08.using Windows.Foundation.Collections;
09.using Windows.UI.Xaml;
10.using Windows.UI.Xaml.Controls;
11.using Windows.UI.Xaml.Controls.Primitives;
12.using Windows.UI.Xaml.Data;
13.using Windows.UI.Xaml.Input;
14.using Windows.UI.Xaml.Media;
15.using Windows.UI.Xaml.Navigation;
16.
17.// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409
18.
19.namespace TelerikBug
20.{
21.    /// <summary>
22.    /// An empty page that can be used on its own or navigated to within a Frame.
23.    /// </summary>
24.    public sealed partial class MainPage : Page
25.    {
26.        public MainPage()
27.        {
28.            this.InitializeComponent();
29.            this.DataContext = new ObservableCollection<DataItem>()
30.            {
31.                new DataItem("Category1", 10),
32.                new DataItem("Category2", 10),
33.                new DataItem("Category3", 10),
34.                new DataItem("Category4", 10),
35.                new DataItem("Category5", 10),
36.                new DataItem("Category6", 10),
37.                new DataItem("Category7", 10),
38.                new DataItem("Category8", 10),
39.                new DataItem("Category9", 10),
40.                new DataItem("Category10", 10),
41.            };
42.        }
43.    }
44.
45.    /// <summary>
46.    /// DataItem for chart series
47.    /// </summary>
48.    public class DataItem
49.    {
50.        /// <summary>
51.        /// Initializes a new instance of the <see cref="DataItem"/> class.
52.        /// </summary>
53.        public DataItem(string key, object value)
54.        {
55.            Key = key;
56.            Value = value;
57.        }
58.
59.        /// <summary>
60.        /// Gets the data item key.
61.        /// </summary>
62.        public string Key { get; private set; }
63.
64.        /// <summary>
65.        /// Gets the data item value.
66.        /// </summary>
67.        public object Value { get; private set; }
68.    }
69.}

[Tsvyatko]

Hello Christopher,

Thank you for contacting us!

By default RadPieChart clips its contents to restrict the elements rendered outside its rectangle. In this scenario you can utilize the ClipToBounds:

<chart:RadPieChart x:Name="PieChart" ClipToBounds="False"

Let us now if this helps. If yoo have any further questions or issues do not hesitate to contact us.

Regards,
Tsvyatko
Telerik by Progress

[Christopher]

Thank you Tsvyatok, This did fix the issue we are having which is great. Thank you again.

I do want to comment though on the solution to this problem. I find it strange that ClipToBounds="False" isn't assumed when ShowLabels="True". I've already said I want to show my labels why do i have to say it again by setting ClipToBounds="False"

I've already indicated that i want labels to be shown, so why do i have to set a second property to say, no, no, i really do want to show my labels. Seems very redundant and unclear that ClipToBounds="False"  has to be set, Anyway that is just my opinion on it. Thank you again for the solution.