[Solved] Bar Chart Shades and Colors

[Chandana]

Hi,

I have 2 questions.

1. The bars in the bar chart have 2 shades (one darker, one lighter) which makes it look like a building(I have highlighted in the attached image). How can I remove the darker shade or part of the bar?

2. Can I specify different colors for each bar on the bar chart?

Thank You.
-Chandana

[Chandana]

I found solution to my 2nd question.

I Just set the LegendDisplayMode to DataPointLabel.
<telerikCharting:BarSeriesDefinition LegendDisplayMode="DataPointLabel"></telerikCharting:BarSeriesDefinition>

[Sia]

Hi Chandana,
 
The shade above the bars is a mask overlay. You can change it by setting custom item style to your bar series definition as follows:

<LinearGradientBrush x:Key="BarMaskBrushOld"  EndPoint="1,0.5" StartPoint="0,0.5">
    <GradientStop Color="#00FFFFFF"/>
    <GradientStop Color="#00FFFFFF" Offset="1"/>
    <GradientStop Color="#19FFFFFF" Offset="0.2"/>
    <GradientStop Color="#B2FFFFFF" Offset="0.2"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="BarMaskBrush"  EndPoint="1,0.5" StartPoint="0,0.5">
    <GradientStop Color="#00FFFFFF" Offset="1"/>
    <GradientStop Color="#B2FFFFFF"/>
</LinearGradientBrush>
<Style x:Key="CustomBar"  TargetType="telerik:Bar">
    <Setter Property="Template" >
        <Setter.Value>
            <ControlTemplate TargetType="telerik:Bar">
                <Canvas Opacity="0"  x:Name="PART_MainContainer">
                    <Rectangle x:Name="PART_DefiningGeometry"
                    Height="{TemplateBinding ItemActualHeight}"
                    Width="{TemplateBinding ItemActualWidth}"
                    Style="{TemplateBinding ItemStyle}" />
                    <Rectangle Height="{TemplateBinding ItemActualHeight}"
                    Width="{TemplateBinding ItemActualWidth}"
                    Fill="{StaticResource BarMaskBrush}"/>
                    <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>

The BarMaskBrushOld one is the default mask which I have modified and set as BarMaskBrush.
I hope this helps.

Kind regards,
Sia
the Telerik team

[Chandana]

Thank you Sia. That worked.