how to remove horizontal bar chart gradient ?

4 posts, 0 answers
  1. Saravanan
    Saravanan avatar
    36 posts
    Member since:
    Jun 2011

    Posted 12 Oct 2011 Link to this post

    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
  2. Evgenia
    Admin
    Evgenia avatar
    1437 posts

    Posted 13 Oct 2011 Link to this post

    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
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  3. Saravanan
    Saravanan avatar
    36 posts
    Member since:
    Jun 2011

    Posted 13 Oct 2011 Link to this post

    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
  4. Evgenia
    Admin
    Evgenia avatar
    1437 posts

    Posted 17 Oct 2011 Link to this post

    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
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
Back to Top