Problem with Pie Chart

[Xavier]

Hi.. I have a pie chart where the items label will always be cut off whenever it is too long. Any idea how can I fix it? Apart from this, I tried to style the SeriesItemLabel to have transparent background but after I had apply the style the ShowConnectors in spidermode doesn't work anymore. Below is the xaml code:

<Window x:Class="Telerik_Pie_Chart.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        Title="MainWindow" Height="300" Width="300">
    <Window.Resources>
        <Style x:Key="SeriesItemLabelStyle" TargetType="{x:Type telerik:SeriesItemLabel}">
            <Setter Property="Padding" Value="2,0"/>
            <Setter Property="IsHitTestVisible" Value="False"/>
            <Setter Property="Fill" Value="Transparent"/>
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <TextBlock TextAlignment="Center" Text="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}"/>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type telerik:SeriesItemLabel}">
                        <Canvas x:Name="PART_MainContainer">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="HoverStates">
                                    <VisualState x:Name="Normal">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0:0:0.15" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_MainContainer"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Hovered">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0:0:0.15" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_MainContainer"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Hidden">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0:0:0.15" To="0.15" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_MainContainer"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Path Style="{TemplateBinding ConnectorStyle}" Stroke="{TemplateBinding Stroke}" StrokeThickness="{TemplateBinding StrokeThickness}" Visibility="{TemplateBinding ConnectorVisibility}">
                                <Path.Data>
                                    <PathGeometry>
                                        <PathFigure>
                                            <PolyLineSegment/>
                                        </PathFigure>
                                    </PathGeometry>
                                </Path.Data>
                            </Path>
                            <Border x:Name="PART_TextContainer" BorderBrush="{TemplateBinding Stroke}" Background="{TemplateBinding Fill}" Height="{TemplateBinding Height}" Style="{TemplateBinding LabelStyle}" Width="{TemplateBinding Width}">
                                <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" Margin="{TemplateBinding Padding}"/>
                            </Border>
                        </Canvas>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>
        <telerik:RadChart Name="radChart1" Background="Black">
            <telerik:RadChart.DefaultView>
                <telerik:ChartDefaultView ChartLegend="{x:Null}">
                    <telerik:ChartDefaultView.ChartArea>
                        <telerik:ChartArea SmartLabelsEnabled="True"/>
                    </telerik:ChartDefaultView.ChartArea>
                </telerik:ChartDefaultView>
            </telerik:RadChart.DefaultView>
            <telerik:RadChart.SeriesMappings>
                <telerik:SeriesMapping ItemsSource="{Binding Pies}">
                    <telerik:SeriesMapping.SeriesDefinition>
                        <telerik:PieSeriesDefinition ItemLabelFormat="#XCAT #Y #%{P0} test with long item label" RadiusFactor="0.5" SeriesItemLabelStyle="{StaticResource SeriesItemLabelStyle}">
                            <telerik:PieSeriesDefinition.LabelSettings>
                                <telerik:RadialLabelSettings ShowZeroValueLabels="False" SpiderModeEnabled="True" ShowConnectors="True"/>
                            </telerik:PieSeriesDefinition.LabelSettings>
                        </telerik:PieSeriesDefinition>
                    </telerik:SeriesMapping.SeriesDefinition>
                    <telerik:SeriesMapping.ItemMappings>
                        <telerik:ItemMapping FieldName="Label" DataPointMember="XCategory"/>
                        <telerik:ItemMapping FieldName="Value" DataPointMember="YValue"/>
                    </telerik:SeriesMapping.ItemMappings>
                </telerik:SeriesMapping>
            </telerik:RadChart.SeriesMappings>
        </telerik:RadChart>
    </Grid>
</Window>

[Sia]

Hi Xavier,

Please use the following style:

<Style x:Key="CustomLabels" TargetType="telerikCharting:SeriesItemLabel">
    <Setter Property="Fill" Value="Transparent" />
    <Setter Property="Foreground" Value="Black" />
    <Setter Property="LabelStyle">
        <Setter.Value>
            <Style TargetType="Border">
                <Setter Property="BorderThickness" Value="0" />
            </Style>
        </Setter.Value>
    </Setter>
</Style>

Best wishes,
Sia
the Telerik team

[Xavier]

Hi Sia,

Thanks for your reply. But I still have the issue of the item label get cutted off because it is outside the chart boundary. Is there a solution to this?

[Sia]

Hi Xavier,

You need to set smaller RadiusFactor for your PieSeriesDefinition or reduce the distance of the labels as shown in this example /the same functionality is available for WPF/. Another option is to wrap the textblocks' content. I hope that one of these solutions is appropriate for your scenario.

Kind regards,
Sia
the Telerik team

[Xavier]

Hi Sia,

I made the item label draggable in order to fixed the issue since setting the radiusfactor or reducing the distance of the labels doesn't solve my problem due to the number of points I had for the chart varies. But the dragging of the lables doesn't work really well. So I am wondering will you guys build in this feature in any of your build?


Rgds,
Xavier

[Sia]

Hello Xavier,

We will forward your feedback to our developers but currently we have no concrete plans about implementing built-in support for draggable item labels. 

Unfortunately for the time being you will still need to use your custom solution.

All the best,
Sia
the Telerik team