Problem with Pie Chart

6 posts, 0 answers
  1. Xavier
    Xavier avatar
    12 posts
    Member since:
    Oct 2010

    Posted 10 Aug 2011 Link to this post

    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"
            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>

  2. Sia
    Admin
    Sia avatar
    667 posts

    Posted 12 Aug 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>

  3. UI for WPF is Visual Studio 2017 Ready
  4. Xavier
    Xavier avatar
    12 posts
    Member since:
    Oct 2010

    Posted 12 Aug 2011 Link to this post

    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?
  5. Sia
    Admin
    Sia avatar
    667 posts

    Posted 16 Aug 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get now >>

  6. Xavier
    Xavier avatar
    12 posts
    Member since:
    Oct 2010

    Posted 27 Oct 2011 Link to this post

    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
  7. Sia
    Admin
    Sia avatar
    667 posts

    Posted 01 Nov 2011 Link to this post

    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

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Back to Top
UI for WPF is Visual Studio 2017 Ready