Pie Chart Label Layout

[Johnny]

Hello,

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:PieSeries.LabelDefinitions>
            <telerik:ChartSeriesLabelDefinition Margin="-4,0,0,0">
                <telerik:ChartSeriesLabelDefinition.Template>
                    <DataTemplate>
                        <StackPanel>
                            <TextBlock Text="{Binding DataItem.Title}" Foreground="Black" FontSize="14"/>
                            <TextBlock Text="{Binding DataItem.Amount, StringFormat=' {0:C0}'}" Foreground="Black" FontSize="12"/>
                        </StackPanel>
                    </DataTemplate>
                </telerik:ChartSeriesLabelDefinition.Template>
            </telerik:ChartSeriesLabelDefinition>
        </telerik:PieSeries.LabelDefinitions>
    </telerik:PieSeries>
</telerik:RadPieChart>

Thanks,

Johnny

[Rosko]

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
Telerik

[sai]

Hi

 

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)
        {
            Series.Clear();

            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.LabelDefinitions.Clear();
            ChartSeries.LabelDefinitions.Add(label);

            ChartSeries.LabelConnectorsSettings = new ChartSeriesLabelConnectorsSettings();

            Series.Add(ChartSeries);
        }

 

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>
                <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"/>
            </StackPanel>
        </Border>        
    </DataTemplate>

 

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.

[sai]

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.

[Ivan]

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.

Regards,
Ivan
Telerik

[sai]

Thank you.Its works fine