This is a migrated thread and some comments may be shown as answers.

Change Pie Chart Series Item Label Background

9 Answers 198 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Vinnie Petre
Top achievements
Rank 1
Vinnie Petre asked on 17 Sep 2010, 01:14 AM
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

9 Answers, 1 is accepted

Sort by
0
Accepted
Bartholomeo Rocca
Top achievements
Rank 1
answered on 17 Sep 2010, 02:27 PM
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.
0
Vinnie Petre
Top achievements
Rank 1
answered on 17 Sep 2010, 06:18 PM

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?
0
Sia
Telerik team
answered on 22 Sep 2010, 01:17 PM
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
0
rajkiran
Top achievements
Rank 1
Veteran
answered on 15 Dec 2010, 10:25 PM
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;



0
Sia
Telerik team
answered on 16 Dec 2010, 06:01 PM
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
0
Siddhartha
Top achievements
Rank 1
answered on 07 Dec 2011, 10:58 PM
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!


0
Sia
Telerik team
answered on 12 Dec 2011, 04:52 PM
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 >>

0
Vijay
Top achievements
Rank 1
answered on 12 Feb 2013, 07:21 PM
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
0
Evgenia
Telerik team
answered on 15 Feb 2013, 12:41 PM
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.

Tags
Chart
Asked by
Vinnie Petre
Top achievements
Rank 1
Answers by
Bartholomeo Rocca
Top achievements
Rank 1
Vinnie Petre
Top achievements
Rank 1
Sia
Telerik team
rajkiran
Top achievements
Rank 1
Veteran
Siddhartha
Top achievements
Rank 1
Vijay
Top achievements
Rank 1
Evgenia
Telerik team
Share this question
or