Remove gradient from bar chart

9 posts, 0 answers
  1. Mike
    Mike avatar
    11 posts
    Member since:
    Oct 2010

    Posted 07 Jan 2011 Link to this post

    How do we remove the gradient overlay in the bar chart?  Screenshot attached.
  2. Evgenia
    Admin
    Evgenia avatar
    1406 posts

    Posted 11 Jan 2011 Link to this post

    Hello Mike,

    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
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
  3. DevCraft banner
  4. Mike
    Mike avatar
    11 posts
    Member since:
    Oct 2010

    Posted 03 Mar 2011 Link to this post

    The above xaml/code worked for Bar Chart, but not for StackedBar Chart.  We tried changing the Style to reflect the StackedBar control, but the gradient was still there.
  5. Evgenia
    Admin
    Evgenia avatar
    1406 posts

    Posted 09 Mar 2011 Link to this post

    Hello Mike,

    Note that different Chart Types have different default styles. Here is how the retemplated StackedBar Style should look like to remove the gradient (additional masks):
    <Style x:Key="StackedBarChart"
           TargetType="telerikCharting:StackedBar">
           <Setter Property="Template" >
               <Setter.Value>
                   <ControlTemplate TargetType="telerikCharting:StackedBar">
                       <Canvas Opacity="0" x:Name="PART_MainContainer">
                           <Rectangle x:Name="PART_DefiningGeometry" 
                                  Height="{TemplateBinding ItemActualHeight}"
                                  Width="{TemplateBinding ItemActualWidth}"
                                  Style="{TemplateBinding ItemStyle}"
                                  RadiusX="{StaticResource BarRadiusX}"
                                  RadiusY="{StaticResource BarRadiusY}" />
                               <ScaleTransform x:Name="PART_AnimationTransform" ScaleY="0" />
                           </Canvas.RenderTransform>
                       </Canvas>
                   </ControlTemplate>
               </Setter.Value>
           </Setter>
       </Style>

    Greetings,
    Evgenia
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  6. ajit
    ajit avatar
    2 posts
    Member since:
    Jun 2010

    Posted 04 Apr 2011 Link to this post

    Hello,

    What will be case of 3D Bar? How to change template of 3D Bar Item?

    Thanks in advance.
    Ajit
  7. Evgenia
    Admin
    Evgenia avatar
    1406 posts

    Posted 07 Apr 2011 Link to this post

    Hi Mike,

    The Default Template for 3D Bar Chart is:

    <Style x:Key="{telerikControls:ThemeResourceKey ThemeType=<?ThemeType?>, ElementType=telerikCharting:BarControl3D}" TargetType="{x:Type telerikCharting:BarControl3D}">
            <Setter Property="Template" Value="{StaticResource Office_BlackBarControl3DTemplate}" />
    </Style>
      
    <ControlTemplate x:Key="Office_BlackBarControl3DTemplate" TargetType="{x:Type telerikCharting:BarControl3D}">
            <Grid>
                <Grid x:Name="PART_Container"></Grid>
                <Viewport3D x:Name="PART_Viewport">
                    <Viewport3D.Children>
                        <ContainerUIElement3D x:Name="PART_ModelElement" Visibility="Hidden">
                            <ContainerUIElement3D.Children>
                                <ModelVisual3D>
                                    <ModelVisual3D.Children>
                                        <telerikCharting:LabelsHitTestVisual
                                            x:Name="hitTestVisual"
                                            IsLabelVisible="False"
                                            Radius="1"
                                            LabelData="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerikCharting:Bar3D}}, Path=LabelData}"
                                            Transform="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerikCharting:Bar3D}}, Path=LabelTransform}">
                                        </telerikCharting:LabelsHitTestVisual>
                                        <telerikCharting:RoundedBox3DPrimitive
                                            Radius="{StaticResource RoundedBarRadiusThickness}"                                            
                                            Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerikCharting:Bar3D}}, Path=Width}"  
                                            Height="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerikCharting:Bar3D}}, Path=Height}"
                                            Depth="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerikCharting:Bar3D}}, Path=Depth}" >
                                            <telerikCharting:RoundedBox3DPrimitive.Material>
                                                <Binding RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type telerikCharting:Bar3D}}"
                                                                 Converter="{StaticResource SeriesMaterialConverter}" 
                                                                 ConverterParameter="{telerikControls:ThemeResourceKey ThemeType=<?ThemeType?>, ElementType={x:Type telerikCharting:ChartArea}, ResourceId={x:Static telerikCharting:ResourceHelper.ResourceKey3DStyle}}" />
                                            </telerikCharting:RoundedBox3DPrimitive.Material>
                                            <telerikCharting:RoundedBox3DPrimitive.Transform>
                                                <ScaleTransform3D x:Name="scaleTransform" ScaleY="0" />
                                            </telerikCharting:RoundedBox3DPrimitive.Transform>
                                        </telerikCharting:RoundedBox3DPrimitive>
                                    </ModelVisual3D.Children>
                                </ModelVisual3D>
                            </ContainerUIElement3D.Children>
                        </ContainerUIElement3D>
                    </Viewport3D.Children>
                    <Viewport3D.Triggers>
                        <EventTrigger RoutedEvent="Window.Loaded">
                            <BeginStoryboard>
                                <Storyboard x:Name="PART_AnimationStoryboard" BeginTime="0.00:00:00.5">
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="hitTestVisual"
                                                            Storyboard.TargetProperty="IsLabelVisible">
                                        <ObjectAnimationUsingKeyFrames.BeginTime>
                                            <Binding RelativeSource="{RelativeSource TemplatedParent}"
                                             Converter="{StaticResource delayConverter}"
                                             ConverterParameter="30%" Mode="OneTime" />
                                        </ObjectAnimationUsingKeyFrames.BeginTime>
                                        <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <system:Boolean>True</system:Boolean>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_ModelElement"
                                                            Storyboard.TargetProperty="Visibility">
                                        <ObjectAnimationUsingKeyFrames.BeginTime>
                                            <Binding RelativeSource="{RelativeSource TemplatedParent}"
                                             Converter="{StaticResource delayConverter}"
                                             ConverterParameter="30%" Mode="OneTime" />
                                        </ObjectAnimationUsingKeyFrames.BeginTime>
                                        <DiscreteObjectKeyFrame KeyTime="0.00:00:00.0" Value="{x:Static Visibility.Visible}" />
                                    </ObjectAnimationUsingKeyFrames>
      
                                    <DoubleAnimationUsingKeyFrames 
                                        Storyboard.TargetName="scaleTransform" 
                                        Storyboard.TargetProperty="(ScaleTransform3D.ScaleY)" >
                                        <DoubleAnimationUsingKeyFrames.Duration>
                                            <Binding RelativeSource="{x:Static RelativeSource.TemplatedParent}"
                                                      Converter="{StaticResource durationConverter}"
                                                      ConverterParameter="70%"/>
                                        </DoubleAnimationUsingKeyFrames.Duration>
                                        <DoubleAnimationUsingKeyFrames.BeginTime>
                                            <Binding RelativeSource="{x:Static RelativeSource.TemplatedParent}" 
                                                         Converter="{StaticResource delayConverter}"
                                                         ConverterParameter="30%" />
                                        </DoubleAnimationUsingKeyFrames.BeginTime>
                                        <SplineDoubleKeyFrame KeySpline="0.646,0.239,1,1" KeyTime="0%" Value="0.025"/>
                                        <SplineDoubleKeyFrame KeyTime="99%" Value="0.99" KeySpline="0.26,0.564,0.512,1"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                    </Viewport3D.Triggers>
                </Viewport3D>
            </Grid>
        </ControlTemplate>


    Best Regards,
    Evgenia
    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
  8. Robert
    Robert avatar
    5 posts
    Member since:
    Apr 2011

    Posted 24 May 2011 Link to this post

    Hello,
        I would like to edit the gradient in blend, how would this be done?
  9. Alvin
    Alvin avatar
    1 posts
    Member since:
    Jun 2013

    Posted 05 Jul 2013 Link to this post

    how can i do the setter declaration in C# code? (for removing the gradient in bar chart)
    i'm not too fan doing setting in xaml..

    Thanks
  10. Evgenia
    Admin
    Evgenia avatar
    1406 posts

    Posted 08 Jul 2013 Link to this post

    Hi Alvin,

     You can write the XAML code in a single string and use the XamlReader.Load method to load it from code-behind. Here is a sample code:

    public Page() 
        InitializeComponent();
       
     Style style = (Style)System.Windows.Markup.XamlReader.Load( 
       "<Style "  +
           "xmlns:telerikCharting=\"clr-namespace:Telerik.Windows.Controls.Charting;assembly=Telerik.Windows.Controls.Charting\" " +
           " 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>");
      
       
        this.radChart1.DefaultSeriesDefinition.ItemStyle= style; 
    }

    Please note that since you are modifying the visual appearance of the control, it is normal and expected to have this done in xaml and not code-behind. This will make your code more readable.

    Regards,
    Evgenia
    Telerik

    TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>
Back to Top
DevCraft banner