Remove gradient from bar chart

[Mike]

How do we remove the gradient overlay in the bar chart?  Screenshot attached.

[Evgenia]

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

[Mike]

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.

[Evgenia]

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

[ajit]

Hello,

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

Thanks in advance.
Ajit

[Evgenia]

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

[Robert]

Hello,
    I would like to edit the gradient in blend, how would this be done?

[Alvin]

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

[Evgenia]

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=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\" " +
       "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