Pie chart item label truncated

4 posts, 0 answers
  1. Melvin
    Melvin avatar
    12 posts
    Member since:
    Dec 2011

    Posted 26 Feb 2012 Link to this post

    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
  2. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 01 Mar 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. DevCraft banner
  4. Melvin
    Melvin avatar
    12 posts
    Member since:
    Dec 2011

    Posted 01 Mar 2012 Link to this post

    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
  5. Petar Marchev
    Admin
    Petar Marchev avatar
    968 posts

    Posted 06 Mar 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Back to Top