This is a migrated thread and some comments may be shown as answers.

Custom Colors for Horizontal Bar Series

1 Answer 187 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Jim Lundgren
Top achievements
Rank 1
Jim Lundgren asked on 10 Jun 2010, 11:21 PM
Hello,

I am using the latest version of the RadControls and the code in the WPF MVVM Support example to create a horizontal bar chart.  The example shows different colors in a regular bar chart, however, when I change it to a horizontal bar definition the fill colors in the rectangles disappear. What is the syntax for creating custom colors in a horizontal bar chart?  Is this possible?

Thank you.

1 Answer, 1 is accepted

Sort by
0
Sia
Telerik team
answered on 15 Jun 2010, 11:24 AM
Hello Jim Lundgren,

You need to change the custom Bar style to correspond with the HorizontalBar template. You need to have the following resources in your project:
<Window.Resources>
    <Style  x:Key="CustomStyle" TargetType="telerik:HorizontalBar" >
        <Setter Property="Template" >
            <Setter.Value>
                <ControlTemplate TargetType="telerik:HorizontalBar">
                    <Canvas Opacity="0" x:Name="PART_MainContainer">
                        <Rectangle x:Name="PART_DefiningGeometry"
                                    Height="{TemplateBinding ItemActualHeight}"
                                    Width="{TemplateBinding ItemActualWidth}"
                                    RadiusX="5"
                                    RadiusY="5"
                                    Fill="{Binding DataItem.GradeColor}" />
                        <Canvas.RenderTransform>
                            <ScaleTransform x:Name="PART_AnimationTransform" ScaleX="0"  />
                        </Canvas.RenderTransform>
                    </Canvas>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
 
    <Style x:Key="CustomLabelStyle" TargetType="telerik:SeriesItemLabel">
        <Setter Property="HorizontalContentAlignment" Value="Center" />
        <Setter Property="Padding" Value="2,0" />
        <Setter Property="IsHitTestVisible" Value="False"/>
        <Setter Property="Template" >
            <Setter.Value>
                <ControlTemplate TargetType="telerik:SeriesItemLabel">
                    <Canvas>
                        <Polyline x:Name="PART_Connector"
                                    Points="{TemplateBinding ConnectorPoints}"
                                    Visibility="{TemplateBinding ConnectorVisibility}"
                                    Style="{TemplateBinding ConnectorStyle}"
                                    Stroke="{TemplateBinding Stroke}"
                                    StrokeThickness="{TemplateBinding StrokeThickness}" />
                        <Border x:Name="PART_TextContainer"
                                Canvas.Left="{TemplateBinding TextContainerCanvasLeft}"
                                Canvas.Top="{TemplateBinding TextContainerCanvasTop}"
                                Style="{TemplateBinding LabelStyle}"
                                BorderBrush="{TemplateBinding Stroke}"
                                Background="Transparent">
                            <TextBlock TextAlignment="{TemplateBinding HorizontalContentAlignment}"
                                        Margin="{TemplateBinding Padding}"
                                        Foreground="Black"
                                        Text="{TemplateBinding Content}" />
                        </Border>
                    </Canvas>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

and apply them in your code-behind:
RadChart1.DefaultSeriesDefinition = new HorizontalBarSeriesDefinition();
RadChart1.DefaultSeriesDefinition.ItemStyle = this.Resources["CustomStyle"] as Style;
RadChart1.DefaultSeriesDefinition.SeriesItemLabelStyle = this.Resources["CustomLabelStyle"] as Style;

You need to use the same approach as the one used in our MVVM example. The only difference is that I have changed the Bar template.

I hope this helps.

Sincerely yours,
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.
Tags
Chart
Asked by
Jim Lundgren
Top achievements
Rank 1
Answers by
Sia
Telerik team
Share this question
or