Change Pie Chart Series Item Label Background

10 posts, 1 answers
  1. Vinnie Petre
    Vinnie Petre avatar
    5 posts
    Member since:
    Jul 2012

    Posted 16 Sep 2010 Link to this post

    Hello,

    I'd like to change the background color on the series item labels for a pie chart.  What's the best way of doing this?  I want it to be a different color than the pie slice.

    Thanks!
    Vinnie
  2. Answer
    Bartholomeo Rocca
    Bartholomeo Rocca avatar
    247 posts
    Member since:
    May 2006

    Posted 17 Sep 2010 Link to this post

    Hello Vinnie,

    You need to set custom label style to achieve the desired effect -- check this demo here: http://demos.telerik.com/silverlight/#Chart/NegativeValues (it sets the background to transparent but you can use the same approach to customize it the way you want).


    Greetings,
    Bart.
  3. DevCraft banner
  4. Vinnie Petre
    Vinnie Petre avatar
    5 posts
    Member since:
    Jul 2012

    Posted 17 Sep 2010 Link to this post

    Thanks.  I had been trying to set the Background like so (same everything else as the sample you'd pointed me to), but this wasn't having any result:

    <Style x:Key="CustomLabelStyle" TargetType="telerik:SeriesItemLabel">
        <Setter Property="Background" Value="White" />
    </Style>

    So it looks like providing a new ControlTemplate is the only way?
  5. Sia
    Admin
    Sia avatar
    667 posts

    Posted 22 Sep 2010 Link to this post

    Hello Vinnie Petre,

    Yes, you need to provide a new ControlTemplate in order to change the labels' background.

    You can also use CreateItemStyle delegate. The following blog topic concerns this approach also.

    Hope this helps,
    Sia
    the Telerik team
    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 Public Issue Tracking system and vote to affect the priority of the items
  6. rajkiran
    rajkiran avatar
    2 posts
    Member since:
    Dec 2010

    Posted 15 Dec 2010 Link to this post

    http://demos.telerik.com/silverlight/#Chart/NegativeValues

    This link not working. Can you help me out setting Item Label Background to transparent, Iam trying the following code, iam able to chage foreground text color but not background color.

    Style style = new Style(typeof(SeriesItemLabel));
                            style.Setters.Add(new Setter(Control.ForegroundProperty, "Black"));
                            style.Setters.Add(new Setter(Control.BackgroundProperty, "White"));
    sm.SeriesDefinition.SeriesItemLabelStyle =  style;



  7. Sia
    Admin
    Sia avatar
    667 posts

    Posted 16 Dec 2010 Link to this post

    Hi rajkiran,

    The mentioned example was removed from our demos section and that is why you cannot open it. Please check the following example where you can see the same approach showing how to remove the background of your labels.

    Greetings,
    Sia
    the Telerik team
    Browse the videos here>> to help you get started with RadControls for Silverlight
  8. Siddhartha
    Siddhartha avatar
    2 posts
    Member since:
    Dec 2011

    Posted 07 Dec 2011 Link to this post

    Hi,

    I tried using the concept from the given code.

     <Style x:Key="CustomStyle" TargetType="charting:Bar">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="charting:Bar">
                                <Canvas>
                                    <Rectangle x:Name="PART_DefiningGeometry" 
                                       Height="{TemplateBinding ItemActualHeight}"
                                       Width="{TemplateBinding ItemActualWidth}"
                                       Fill="{Binding DataItem.PopulationColor}" />
                                    <Canvas.RenderTransform>
                                        <ScaleTransform x:Name="PART_AnimationTransform" ScaleY="0" />
                                    </Canvas.RenderTransform>
                                </Canvas>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>


    and called it in the following code:


    <chart:RadChart x:Name="chartCarDwell" Grid.Column="0" Grid.Row="1" telerik:StyleManager.Theme="Transparent" Margin="0, 25, 0, 0">
                <chart:RadChart.PaletteBrushes>
                    <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                        <GradientStop Color="#FF367fb6" Offset="0" />
                        <GradientStop Color="#FF095791" Offset="1" />
                    </LinearGradientBrush>
                    <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                        <GradientStop Color="#FFa11616" Offset="0" />
                            <!--<GradientStop Color="Crimson" Offset="0" />-->
                            <GradientStop Color="#FF720000" Offset="1" />
                    </LinearGradientBrush>
                </chart:RadChart.PaletteBrushes>
                <chart:RadChart.SeriesMappings>
                    <charting:SeriesMapping LegendLabel="Car Dwell">
                        <charting:SeriesMapping.SeriesDefinition>
                                <charting:BarSeriesDefinition ShowItemLabels="True" ShowItemToolTips="True" ItemStyle="{StaticResource CustomStyle}">
                                    <charting:BarSeriesDefinition.LabelSettings>
                                        <charting:BarLabelSettings LabelDisplayMode="MidPoint" Distance="0" />
                                    </charting:BarSeriesDefinition.LabelSettings>


                                </charting:BarSeriesDefinition> 
                        </charting:SeriesMapping.SeriesDefinition>
                        <charting:ItemMapping DataPointMember="YValue" FieldName="AverageDwell"  />
                        <charting:ItemMapping DataPointMember="XCategory" FieldName="ExtendedDay" />
                    </charting:SeriesMapping>
                </chart:RadChart.SeriesMappings>


                <chart:RadChart.DefaultView>
                    <charting:ChartDefaultView>
                        <charting:ChartDefaultView.ChartLegend>
                            <charting:ChartLegend Visibility="Collapsed" />
                        </charting:ChartDefaultView.ChartLegend>
                        <charting:ChartDefaultView.ChartArea>
                            <charting:ChartArea ItemClick="ChartArea_ItemClick"/>
                              


                            </charting:ChartDefaultView.ChartArea>
                        
                    </charting:ChartDefaultView>
                </chart:RadChart.DefaultView>
            </chart:RadChart>


    Still I am getting the default location of the seriesitemlabels within the blocks of color same as the bars.
    Please help me!


  9. Sia
    Admin
    Sia avatar
    667 posts

    Posted 12 Dec 2011 Link to this post

    Hello Siddhartha,

    Please try the following Style which needs to be applied as SeriesItemLabelStyle:
    <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>

    All the best,
    Sia
    the Telerik team

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

  10. Vijay
    Vijay avatar
    16 posts
    Member since:
    Apr 2011

    Posted 12 Feb 2013 Link to this post

    Hi I did Everything you said i am able to change the color of the text but still the background is not changing .

    Here is the code

                
    Style style = new Style(typeof(SeriesItemLabel));
                 style.Setters.Add(new Setter(Shape.FillProperty, new SolidColorBrush(Colors.Transparent)));
                 style.Setters.Add(new Setter(Control.ForegroundProperty, new SolidColorBrush(Colors.Black)));
                var boarderStyle= new Style(typeof(Border));
                boarderStyle.Setters.Add(new Setter(Control.BorderThicknessProperty,0));
                style.Setters.Add(new Setter(SeriesItemLabel.LabelStyleProperty ,boarderStyle));

    I created the style and applied to my series definition

                definition.SeriesItemLabelStyle = style;
    But the back ground is not transparent .

    Please help
    Thanks!
    Vijay
  11. Evgenia
    Admin
    Evgenia avatar
    1406 posts

    Posted 15 Feb 2013 Link to this post

    Hello Vijay,

     Can you please try the SeriesItemLabel style provided in this help topic? Everything should work as expected with it.

    Kind regards,
    Evgenia
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top
DevCraft banner