reduce size of legend icons

[Kiran Ghanwat]

Hello Community,

 I am newbee for WPF,
How can I reduce size of legend Markers(circle or square) of charts?

Thanks in advance.

Kiran Ghanwat

[Evgenia]

Hello Kiran,

To be able to change the LegendItemMarkers size you should retemplate the ChartLegendItem and manually set the desired Width and Height of the LegendItemMarker. By default their value is 16. This is the default ChartLegendItem Style:

<Style x:Key="MyLegendItemStyle"
       TargetType="telerikCharting:ChartLegendItem">
           <Setter Property="Foreground" Value="{StaticResource LegendForeground}" />
           <Setter Property="Padding" Value="5,0,5,0" />
           <Setter Property="Margin" Value="0,3,0,2" />
           <Setter Property="Template" >
               <Setter.Value>
                   <ControlTemplate TargetType="telerikCharting:ChartLegendItem">
                       <Grid x:Name="PART_MainContainer" Background="{TemplateBinding Background}"
                         HorizontalAlignment="Stretch" VerticalAlignment="Top">
                           <Grid.ColumnDefinitions>
                               <ColumnDefinition Width="Auto" />
                               <ColumnDefinition />
                           </Grid.ColumnDefinitions>
                           <Path x:Name="PART_LegendItemMarker"
                            Width="16"
                            Height="16"
                            Margin="{TemplateBinding Margin}"
                            StrokeThickness="{TemplateBinding MarkerStrokeThickness}"
                            Style="{TemplateBinding ItemStyle}"
                            Stretch="Fill">
                               <Path.Data>
                                   <PathGeometry x:Name="PART_ItemMarkerGeometry" />
                               </Path.Data>
                           </Path>
                           <!-- Mask 1 -->
                           <Path x:Name="PART_SelectedState"
                             Width="14"
                            Height="14"
                            Margin="{TemplateBinding Margin}"
                            Fill="{StaticResource LegendItemMarkerMask}"
                            OpacityMask="{StaticResource LegendItemMarkerMaskOpacityMask}"
                            Stroke="{StaticResource LegendItemMarkerMaskStroke}"
                            StrokeThickness="{StaticResource LegendItemMarkerMaskStrokeThickness}"
                            Stretch="Fill">
                               <Path.Data>
                                   <PathGeometry x:Name="PART_ItemMarkerMaskGeometry" />
                               </Path.Data>
                           </Path>
                           <!-- Mask 2 -->
                           <Path Width="14"
                             Height="14"
                             Margin="{TemplateBinding Margin}"
                             Fill="{StaticResource LegendItemMarkerMask2}"
                             Stretch="Fill">
                               <Path.Data>
                                   <PathGeometry x:Name="PART_ItemMarkerMaskGeometry2" />
                               </Path.Data>
                           </Path>
                           <TextBlock x:Name="PART_TextBlock"
                                  Grid.Column="1"
                                  Padding="{TemplateBinding Padding}"
                                  Margin="{TemplateBinding Margin}"
                                  Foreground="{TemplateBinding Foreground}"
                                  Text="{TemplateBinding Label}" />
                       </Grid>
                   </ControlTemplate>
               </Setter.Value>
           </Setter>
       </Style>

These are the Static Resources used in it:

<SolidColorBrush x:Key="LegendForeground" Color="#FF000000" />

 <mscorlib:Double x:Key="LegendItemMarkerMaskStrokeThickness">1</mscorlib:Double>
    <SolidColorBrush x:Key="LegendItemMarkerMaskStroke" Color="White" />
    <LinearGradientBrush x:Key="LegendItemMarkerMask" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#D8FFFFFF" Offset="0.009"/>
        <GradientStop Color="#66FFFFFF" Offset="1"/>
        <GradientStop Color="Transparent" Offset="0.43"/>
        <GradientStop Color="#7FFFFFFF" Offset="0.42"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="LegendItemMarkerMaskOpacityMask" Color="#FF000000" />
    <SolidColorBrush x:Key="LegendItemMarkerMask2" Color="Transparent" />

To apply the Style to your ChartLegendItem you can do it like this:

RadChart1.DefaultView.ChartLegend.LegendItemStyle = this.Resources["MyLegendItemStyle"] as Style;

Greetings,
Evgenia
the Telerik team

[Kiran Ghanwat]

Hello Evgenia ,

Gr8!!.
Thanks for your reply, it's working as per my requirement.

There is one more query, How can I change default colors of Bars to user defined colors.
I guess there are 10 colors which, repeats again after it reaches count 10.
I need to define my colors instead of default colors.

Thanks in advance.
Kiran

[Evgenia]

Hello Kiran,

Take a look at this demo with full source code - http://demos.telerik.com/wpf/#Chart/CustomPalette that show how to set CustomPalette for your Bars.

Best wishes,
Evgenia
the Telerik team

[Kiran Ghanwat]

Hello Evgenia ,

Thanks a lot.
Worked for me.

Now, just I want to remove Gradient of the color. I want to show that as plane colors. How to do that?

Thanks,
Kiran Ghanwat

[Evgenia]

Hello Kiran,

The approach with CustomPalette is appropriate if you want to have custom colors for Bars. However to disable the jewel look (Gradient)  you should re-template the default Bars style -- the updated template will not include the element with the mask, placed over the bar. Do not forget to set LegendDisplayMode to DataPointLabel to have each Bar colored differently as set in your CustomPalette:

series1.Definition.LegendDisplayMode = LegendDisplayMode.DataPointLabel;

Find attached a sample project demonstrating Solid Colored Bars with CustomPalette in action.

Best wishes,
Evgenia
the Telerik team

[Kiran Ghanwat]

Hello Evgenia ,

Gr8 !!

Thanks it worked for me.

Kiran.