How to customize the appearance of a chart series in a RadChart control using ItemStyle

RELATED TO:

Article information

Article relates to

 RadChart for WPF

Created by

 Telerik Admin

Last modified

 03/24/2009

Last modified by

 Telerik Admin


You can leverage the ItemStyle property of the ChartSeriesDefinition to customize each individual chart series appearance. All you need to do is to provide the necessary styles as resources. Then just find the correct resource and set it to ItemStyle property.

Let us take an example. You can define the following style:

<Window.Resources>  
        <LinearGradientBrush x:Key="RedBrush" StartPoint="0.5, 0" EndPoint="0.5, 1">  
            <GradientBrush.GradientStops>  
                <GradientStop Color="White" Offset="0"></GradientStop>  
                <GradientStop Color="Red" Offset="1"></GradientStop>  
            </GradientBrush.GradientStops>  
        </LinearGradientBrush>  
        <Style x:Key="MyStyle" TargetType="{x:Type telerik:Bar}">  
            <Setter Property="Template" >  
                <Setter.Value>  
                    <ControlTemplate TargetType="{x:Type telerik:Bar}">  
                        <Rectangle  
                                   x:Name="PART_DefiningGeometry"  
                                   Fill="{StaticResource RedBrush}"   
                                   Stroke="Pink"   
                                   StrokeThickness="3"   
                                   Height="{TemplateBinding ActualHeight}"  
                                   Width="{TemplateBinding ActualWidth}"/>  
                    </ControlTemplate>  
                </Setter.Value>  
            </Setter>  
        </Style>  
    </Window.Resources>  


Now all you need to do is set this style to the ItemStyle property of the SeriesDefinition:
barSeries.Definition.ItemStyle = this.FindResource("MyStyle") as Style; 

We can hide the legend and play a bit with gridlines and striplines
RadChart1.DefaultView.ChartLegend.Visibility = Visibility.Collapsed;
RadChart1.DefaultView.ChartArea.AxisX.StripLinesVisibility = Visibility.Collapsed;
RadChart1.DefaultView.ChartArea.AxisY.MajorGridLinesVisibility = Visibility.Visible;
RadChart1.DefaultView.ChartArea.AxisY.StripLinesVisibility = Visibility.Collapsed;

and after populating the chart with some random data, we get the chart shown in the image below.
RadChart


Related Products
Telerik UI for WPF

Resources Buy Try

More Resources

  • Forums

    Find answers to thousands of questions or reach out to our active community.

  • Videos

    Get started quickly with the XAMLflix video series.

  • Demos

    Download and browse 300+ demos for all WPF controls.

  • Sample Applications

    See examples of sample applications created with Telerik UI for WPF.

  • Feedback Portal

    Submit your feedback and ideas, request a new feature or follow your favorite items.

  • Documentation

    Benefit from detailed help articles and API references for all WPF controls.

  • Knowledge Base

    Explore tutorials and working examples on how to achieve common scenarios.

  • Code Library

    Browse sample projects submitted by Progress staff and community members.

  • Blog

    Stay up-to-date with the latest functionality, how-to articles and industry trends.

  • Release History

    Up-to-date release notes for all new features and improvements.