Pie chart item label truncated

[Melvin]

Hi,

I have problem with my pie chart display. It seems that whenever the value is "100.00%", the label seems to be partially truncated.

Please refer to the attached (piechart.jpg) for more details.

The xaml code is shown below:

 <telerik:RadChart Grid.Row="1" x:Name="pieChart" BorderBrush="Transparent" Background="Transparent" ItemsSource="{Binding pieChartDataItems}" Width="150" Height="150" HorizontalAlignment="Center" HorizontalContentAlignment="Center">
                                            <telerik:RadChart.DefaultView>
                                                <telerik:ChartDefaultView ChartLegendPosition="Bottom">
                                                    <telerik:ChartDefaultView.ChartLegend>
                                                        <telerik:ChartLegend Visibility="Collapsed"/>
                                                    </telerik:ChartDefaultView.ChartLegend>
                                                </telerik:ChartDefaultView>
                                            </telerik:RadChart.DefaultView>
                                            <telerik:RadChart.SeriesMappings>
                                                <telerik:SeriesMapping >
                                                    <telerik:SeriesMapping.SeriesDefinition>
                                                        <telerik:PieSeriesDefinition ItemStyle="{StaticResource PieStyle}" ItemLabelFormat="#Y{0.00}%" ShowItemLabels="True" ShowItemToolTips="True">
                                                            <telerik:PieSeriesDefinition.Appearance>
                                                                <telerik:SeriesAppearanceSettings Fill="Transparent" Foreground="White">
                                                                </telerik:SeriesAppearanceSettings>
                                                            </telerik:PieSeriesDefinition.Appearance>
                                                            <telerik:PieSeriesDefinition.InteractivitySettings>
                                                                <telerik:InteractivitySettings HoverScope="Item" SelectionMode="Single" />
                                                            </telerik:PieSeriesDefinition.InteractivitySettings>
                                                        </telerik:PieSeriesDefinition>
                                                    </telerik:SeriesMapping.SeriesDefinition>
                                                    <telerik:SeriesMapping.ItemMappings>
                                                        <telerik:ItemMapping FieldName="category" DataPointMember="Tooltip"/>
                                                        <telerik:ItemMapping FieldName="data" DataPointMember="LegendLabel"/>
                                                        <telerik:ItemMapping FieldName="data" DataPointMember="YValue"/>
                                                    </telerik:SeriesMapping.ItemMappings>
                                                </telerik:SeriesMapping>
                                            </telerik:RadChart.SeriesMappings>


                                            <!--<telerik:RadChart.DefaultSeriesDefinition>
                                                <telerik:DoughnutSeriesDefinition ShowItemToolTips="True">
                                                    <telerik:DoughnutSeriesDefinition.InteractivitySettings>
                                                        <telerik:InteractivitySettings HoverScope="Item" SelectionMode="Single" />
                                                    </telerik:DoughnutSeriesDefinition.InteractivitySettings>
                                                </telerik:DoughnutSeriesDefinition>
                                            </telerik:RadChart.DefaultSeriesDefinition>-->
                                        </telerik:RadChart>



and for styling:


<Style x:Key="PieStyle" TargetType="telerik:Pie">
            <Setter Property="Foreground" Value="White" />
            <Setter Property="FontSize" Value="14" />
            <Setter Property="Template" >
                <Setter.Value>
                    <ControlTemplate TargetType="telerik:Pie">
                        <Canvas>
                            <Path x:Name="PART_DefiningGeometry"
                          Data="{TemplateBinding FigurePath2}"
                          Style="{TemplateBinding ItemStyle}"/>
                            <Ellipse
                        Clip="{TemplateBinding FigurePath3}"
                        Fill="{Binding DataItem.pieSliceColor}"
                       Width="{TemplateBinding ItemActualWidth}"
                        Height="{TemplateBinding ItemActualHeight}"/>
                            <!--<telerik:SeriesItemLabel Style="{StaticResource customLabels}">
                            </telerik:SeriesItemLabel>-->
                            <telerik:SeriesItemLabel Width="Auto">
                            </telerik:SeriesItemLabel>
                            <Canvas.RenderTransform>
                                <ScaleTransform x:Name="PART_AnimationTransform" ScaleX="0" ScaleY="0" />
                            </Canvas.RenderTransform>
                        </Canvas>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>


I would appreciate if any of you could provide a code snippet on how to make the width of the item label to be wider (or perhaps make it auto).

Thanks and regards,
Melvin Liew

[Petar Marchev]

Hello,

Indeed there seems to be an issue with this. Is it possible to increase the chart's width? A value of 170 should resolve this.

Another thing you can try is change the label offset of the series:

<telerik:PieSeriesDefinition LabelOffset="0.7"

You can also take a look at this demo to see the label offset in action.

All the best,
Petar Marchev
the Telerik team

[Melvin]

Hi,

I have tried the methods that you suggested.

The occurrence to get the label truncated is less but still happens.

Thanks and regards,
Melvin Liew

[Petar Marchev]

Hi,

Is it an option to increase the width of the chart? The width only, not the height. Setting a value of 200 should avoid clipping of the labels.

You can also remove the item label format. This way the labels will not be that wide and they shouldn't get clipped.

Another suggestion I can make is to use horizontal bar series instead. Since the space is limited - horizontal bars might be a better solution to start with.

All the best,
Petar Marchev
the Telerik team