RadPieChart Labels Clip Top Bottom Left and Right whe

3 posts, 1 answers
  1. Christopher
    Christopher avatar
    4 posts
    Member since:
    Jul 2014

    Posted 01 Sep Link to this post

    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"
    05.    xmlns:local="using:TelerikBug"
    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.}

  2. Answer
    Tsvyatko
    Admin
    Tsvyatko avatar
    833 posts

    Posted 02 Sep Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Christopher
    Christopher avatar
    4 posts
    Member since:
    Jul 2014

    Posted 02 Sep in reply to Tsvyatko Link to this post

    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. 

Back to Top