Change Pie Chart Series Item Label Background

[Vinnie Petre]

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

[Bartholomeo Rocca]

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.

[Vinnie Petre]

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?

[Sia]

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

[rajkiran]

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;

[Sia]

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

[Siddhartha]

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!

[Sia]

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

[Vijay]

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

[Evgenia]

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