how to remove horizontal bar chart gradient ?

[Saravanan]

Hi team,
i dont know hot to apply style of removing the gradient on horizontal bar chart,

<Style x:Key="MyBarStyleBars" TargetType="telerik:HorizontalBar">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="telerik:HorizontalBar">
                        <Canvas Opacity="0" x:Name="PART_MainContainer">
                            <Rectangle x:Name="PART_DefiningGeometry"
                                    Height="{TemplateBinding ItemActualHeight}"
                                    Width="{TemplateBinding ItemActualWidth}"
                                    Style="{TemplateBinding ItemStyle}">
                            </Rectangle>
                            <Canvas.RenderTransform>
                                <ScaleTransform x:Name="PART_AnimationTransform"
                                        ScaleY="0" />
                            </Canvas.RenderTransform>
                        </Canvas>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

<telerik:HorizontalBarSeriesDefinition
   SeriesItemLabelStyle="{StaticResource SeriesItemLabelStyle}"
  LegendDisplayMode="DataPointLabel"ItemStyle="{StaticResource MyBarStyleBars}"
   ShowItemLabels="True">
  </telerik:HorizontalBarSeriesDefinition>

but is working when when i change to TargetType="telerikBar" to ordinary bar chart what should i do ?

Thanks
Saravanan

[Evgenia]

Hello Saravanan,

Note that different Chart Types have different default styles. This is the default Bar Style:
To remove the gradient overlay in the bar chart (the jewel look) you should retemplate the Style of the bar chart to remove the masks from it. Here is how your Style should look like:

<Style x:Key="MyBarStyle" TargetType="telerikCharting:Bar">
           <Setter Property="Template" >
               <Setter.Value>
                   <ControlTemplate TargetType="telerikCharting:Bar">
                       <Rectangle x:Name="PART_DefiningGeometry"
                                  Height="{TemplateBinding ItemActualHeight}"
                                  Width="{TemplateBinding ItemActualWidth}"
                                  Style="{TemplateBinding ItemStyle}"
                                  >
                       </Rectangle>
                   </ControlTemplate>
               </Setter.Value>
           </Setter>
       </Style>

You can set the created style in code-behind like this:

radChart.DefaultSeriesDefinition.ItemStyle = this.Resources["MyBarStyle"] as Style

Kind regards,
Evgenia
the Telerik team

[Saravanan]

Hi Team,

Thank you for your reply i already tried this,it is working.But the

animation is not working..what style i should give to get the animation?

bars are not animating..let me know

Thanks,
Saravanan

[Evgenia]

Hello Saravanan,

This is the complete Style that you can use in order to have the Animations working:

<Style x:Key="MyBarStyle" TargetType="telerikCharting:Bar">
           <Setter Property="Template" >
               <Setter.Value>
                   <ControlTemplate TargetType="telerikCharting:Bar">
                       <Rectangle x:Name="PART_DefiningGeometry"
                                  Height="{TemplateBinding ItemActualHeight}"
                                  Width="{TemplateBinding ItemActualWidth}"
                                  Style="{TemplateBinding ItemStyle}"
                                  >
                       </Rectangle>
<Rectangle x:Name="PART_SelectedState"
                        Height="{TemplateBinding ItemActualHeight}"
                        Width="{TemplateBinding ItemActualWidth}"  />
                    <Canvas.RenderTransform>
                        <ScaleTransform x:Name="PART_AnimationTransform" ScaleY="0" />
                    </Canvas.RenderTransform>
                    <vsm:VisualStateManager.VisualStateGroups>
                        <vsm:VisualStateGroup x:Name="HoverStates">
                            <vsm:VisualState x:Name="Normal">
                                <Storyboard>
                                    <DoubleAnimation To="1.0" Storyboard.TargetName="PART_MainContainer" Storyboard.TargetProperty="Opacity"

Duration="0.00:00:00.15" />
                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="Hovered">
                                <Storyboard>
                                    <DoubleAnimation To="1.0" Storyboard.TargetName="PART_MainContainer" Storyboard.TargetProperty="Opacity"

Duration="0.00:00:00.15" />
                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="Hidden">
                                <Storyboard>
                                    <DoubleAnimation To="0.15" Storyboard.TargetName="PART_MainContainer" Storyboard.TargetProperty="Opacity"

Duration="0.00:00:00.15" />
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="SelectionStates">
                            <vsm:VisualState x:Name="Unselected">
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="Selected">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_SelectedState" Duration="0.00:00:00.05"

Storyboard.TargetProperty="Stroke">
                                        <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <SolidColorBrush Color="#B2000000" />
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_SelectedState" Duration="0.00:00:00.05"

Storyboard.TargetProperty="StrokeThickness">
                                        <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <system:Double xmlns:system="clr-namespace:System;assembly=mscorlib">2</system:Double>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                    </vsm:VisualStateManager.VisualStateGroups>
                </Canvas>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

All the best,
Evgenia
the Telerik team