Bar Chart Shades and Colors

4 posts, 1 answers
  1. Chandana
    Chandana avatar
    13 posts
    Member since:
    Apr 2011

    Posted 27 Jun 2011 Link to this post

    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
  2. Chandana
    Chandana avatar
    13 posts
    Member since:
    Apr 2011

    Posted 27 Jun 2011 Link to this post

    I found solution to my 2nd question.

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

  3. Answer
    Sia
    Admin
    Sia avatar
    765 posts

    Posted 29 Jun 2011 Link to this post

    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
    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
  4. Chandana
    Chandana avatar
    13 posts
    Member since:
    Apr 2011

    Posted 29 Jun 2011 Link to this post

    Thank you Sia. That worked.
Back to Top