This is a migrated thread and some comments may be shown as answers.

Pie Chart Label Layout

5 Answers 217 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
Johnny
Top achievements
Rank 2
Johnny asked on 18 May 2013, 03:58 AM
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

5 Answers, 1 is accepted

Sort by
0
Rosko
Telerik team
answered on 22 May 2013, 07:56 AM
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

Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

0
sai
Top achievements
Rank 1
answered on 27 Nov 2015, 09:32 AM

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.

0
sai
Top achievements
Rank 1
answered on 01 Dec 2015, 09:04 AM

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.

0
Ivan
Telerik team
answered on 01 Dec 2015, 09:10 AM
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
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
0
sai
Top achievements
Rank 1
answered on 04 Dec 2015, 05:08 AM
Thank you.Its works fine
Tags
ChartView
Asked by
Johnny
Top achievements
Rank 2
Answers by
Rosko
Telerik team
sai
Top achievements
Rank 1
Ivan
Telerik team
Share this question
or