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
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
3 Answers, 1 is accepted
0
Chandana
Top achievements
Rank 1
answered on 27 Jun 2011, 07:41 PM
I found solution to my 2nd question.
I Just set the LegendDisplayMode to DataPointLabel.
<telerikCharting:BarSeriesDefinition LegendDisplayMode="DataPointLabel"></telerikCharting:BarSeriesDefinition>
I Just set the LegendDisplayMode to DataPointLabel.
<telerikCharting:BarSeriesDefinition LegendDisplayMode="DataPointLabel"></telerikCharting:BarSeriesDefinition>
0
Accepted
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:
The
I hope this helps.
Kind regards,
Sia
the Telerik team
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
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
0
Chandana
Top achievements
Rank 1
answered on 29 Jun 2011, 06:21 PM
Thank you Sia. That worked.