Pie Chart Label Layout

6 posts, 0 answers
  1. Johnny
    Johnny avatar
    4 posts
    Member since:
    Aug 2009

    Posted 17 May 2013 Link to this post


    I have a RadChartView Pie Chart where I bound to a collection of objects. My issue is with the spacing on the data point labels. See the attached image for an example. Is there any properties that can override the label location like Excel can do?

    Here is my chart definition:

    <telerik:RadPieChart x:Name="SalesByFamilyChart" Palette="Windows8" Grid.Row="1">
        <telerik:PieSeries ShowLabels="True" ItemsSource="{Binding SalesByFamilyPieData}" ValueBinding="Amount" RadiusFactor="0.8">
                <telerik:ChartSeriesLabelDefinition Margin="-4,0,0,0">
                                <TextBlock Text="{Binding DataItem.Title}" Foreground="Black" FontSize="14"/>
                                <TextBlock Text="{Binding DataItem.Amount, StringFormat=' {0:C0}'}" Foreground="Black" FontSize="12"/>


  2. Rosko
    Rosko avatar
    137 posts

    Posted 22 May 2013 Link to this post

    Hello Johnny,

    The current version of does not support "smart labels" feature, i.e. automatic layout of the labels, so that they do not overlap. This has been logged as a feature request in our public issue tracking system here. You can vote for it in order to raise some more attention to it.

    Meanwhile, I would like to mention is that generally pie charts are not good at visualizing more than 5-7 data points. I believe that a bar chart would be more suitable for the purpose.

    If you still would like to have a pie chart, as a workaround, I would advice to use a legend, namely RadLegend. Over here you can read more about it.

    Regards, Rosko

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. sai
    sai avatar
    43 posts
    Member since:
    Feb 2015

    Posted 27 Nov 2015 in reply to Rosko Link to this post



    Recently i upgraded my wpf controls in my project.earlier the below code and template to show the custom label in my pi-chart.

     public class PieLabelStrategy : ChartSeriesLabelStrategy
                private string format = "{0} ({1})";

                public PropertyNameDataPointBinding Binding { get; set; }

                public override LabelStrategyOptions Options
                    get { return LabelStrategyOptions.Content; } 

                public PieLabelStrategy()

                public override object GetLabelContent(DataPoint point, int labelIndex)
                    if (point == null || labelIndex < 0)
                        return base.GetLabelContent(point, labelIndex);
                    return string.Format(this.format, Binding.GetValue(point.DataItem), ((PieDataPoint)point).Percent);

            public void SetChartSeries(string valueBinding, string category)

                ChartSeries = null;

                ChartSeries = new DoughnutSeries();


                var binding = new PropertyNameDataPointBinding(category);
                ChartSeries.ValueBinding = new PropertyNameDataPointBinding(valueBinding);

                PieLabelStrategy pieLabelStrategy = new PieLabelStrategy();
                pieLabelStrategy.Binding = new PropertyNameDataPointBinding(category);   

                var label = new ChartSeriesLabelDefinition()
                    Margin = new Thickness(-10, -10, -10, -10),
                    Strategy = pieLabelStrategy,
                    Template = resourceDictionary["PieChartPointTemplate"] as DataTemplate,

                var smartlabelStrategy = new PieChartSmartLabelsStrategy();
                smartlabelStrategy.DisplayMode = PieChartLabelsDisplayMode.SpiderAlignedOutwards;
                SmartLabelsStrategy = smartlabelStrategy;


                ChartSeries.LabelConnectorsSettings = new ChartSeriesLabelConnectorsSettings();



    and the below template

        <DataTemplate x:Key="PieChartPointTemplate">
            <Border Background="Transparent">
                <StackPanel MinWidth="60" Orientation="Horizontal" >
                    <TextBlock Text="{Binding DataItem.Category}" MaxWidth="150" ToolTip="{Binding DataItem.Category}"
                               Foreground="#7F7F7F" FontSize="13" Margin="2" TextTrimming="CharacterEllipsis" >
                    <TextBlock Text="(" FontSize="13" Margin="2" Foreground="#7F7F7F"/>
                    <TextBlock Text="{Binding Percent, StringFormat=\{0:n2\} }" FontSize="13" Margin="2" Foreground="#7F7F7F"/>
                    <TextBlock Text=" %)" FontSize="13" Margin="2" Foreground="#7F7F7F"/>


    And i updgraded the version to 2015 Q3.now when i run my application the chart displays like below.

    I am not sure what chnages i need to do.please assist me in this.


    Please check attached chart images before and after upgradation.


    note: i just upgraded the latest dlls.nothing changes in code.

  4. sai
    sai avatar
    43 posts
    Member since:
    Feb 2015

    Posted 01 Dec 2015 in reply to sai Link to this post

    Hi above issue I have fixed by removing the strategy from chart label configuration.

    I have found new issue now.

    please have a look into the below two attached images.

    After upgrading the circle shape of chart width is reduced.how to retain back the same width of circle border.

  5. Ivan
    Ivan avatar
    44 posts

    Posted 01 Dec 2015 Link to this post

    Hi sai,

    As we can see from your code, you use the method SetChartSeries to set the chart's data, strategy and template. Instead we would recommend you to set up the chart from the XAML instead. 

    The label content comes from your PieLabelStrategy. The DataContext for the whole DataTemplate is the returned result of the GetContent() method. The bindings in the definition's template are expecting an object of type DataPoint, however, the result from the method is of type string. That's why the bindings of the TextBlocks in the template don't work as expected. If you plan to use bindings in the TextBlocks, you can use only the Template property instead of a label strategy (PieLabelStrategy).

    I've attached a sample project offering you a solution with your way of setting the chart. 

    As for the size of the doughnut, you can control it using the RadiusFactor and InnerRadiusFactor properties of the series.

    Please let us know if you have further issues with this.

    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
  6. sai
    sai avatar
    43 posts
    Member since:
    Feb 2015

    Posted 03 Dec 2015 in reply to Ivan Link to this post

    Thank you.Its works fine
Back to Top