Home / Community & Support / Knowledge Base / RadControls for WPF / Chart / How to customize the appearance of a chart series in a RadChart control

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

Article Info

Rating: 4

Article information

Article relates to

 RadChart for WPF

Created by

 Telerik Admin

Last modified

 January 6th, 2009

Last modified by

 Telerik Admin

RadChart comes with a versatile collection of preset themes (Summer, Vista, Office, etc.). At times you may wish to use one of the predefined themes but customize its appearance a bit to fit your specific scenario / application and RadChart provides easy mechanism to achieve the desired effect.

The chart control uses the concept of style palettes in order to style the various chart series. There are distinct style palettes for the various series types (Line, Bar, Pie, etc.) and each palette can contain as many style elements as you want -- the first style is applied to the first chart series of the given type, the second - to the second series, etc. If you are drawing more series than the number of defined styles, the first series that does not have corresponding style, will start from the beginning again (use the first style).

Let us customize the chart series item appearance of a RadChart that defines two line series. In order to customize the line color, you need to override the default palette associated with line series for the respective theme (palettes are always associated with a theme).

First you need to associate the xmlns mappings on your root xml element e.g. Window:

<Window x:Class="WpfApplication6.Window1" 
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" 
   Title="Window1" Height="300" Width="600"> 


Here is a sample code snippet that overrides the style for the first two line series and they are displayed in Lime and Bisque respectively (the rest of the styles are the default palette styles for the Summer theme but you can customize them as well if you are drawing more than two line series). Note how we are identifying the series palette to override via the current theme and the ResourceKeyLineStyle string defined in the public utility class ResourceHelper – if we were customizing Area or Bar series we would have used ResourceKeyAreaStyle / ResourceKeyBarStyle respectively.

XAML
<Grid>
    <Grid.Resources>
        <telerik:StylesPalette x:Key="{telerik:ThemeResourceKey ThemeType={x:Type telerik:SummerTheme}, ElementType={x:Type telerik:ChartArea}, ResourceId={x:Static telerik:ResourceHelper.ResourceKeyLineStyle}}">
            <Style TargetType="telerik:SelfDrawingSeries">
                <Setter Property="BorderLineStyle">
                    <Setter.Value>
                        <Style TargetType="{x:Type Shape}" >
                            <Setter Property="StrokeStartLineCap" Value="Round" />
                            <Setter Property="StrokeEndLineCap" Value="Round" />
                            <Setter Property="StrokeThickness" Value="4" />
                            <Setter Property="Stroke" Value="Lime" />
                            <Setter Property="Fill" Value="Lime" />
                        </Style>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style TargetType="telerik:SelfDrawingSeries">
                <Setter Property="BorderLineStyle">
                    <Setter.Value>
                        <Style TargetType="{x:Type Shape}" >
                            <Setter Property="StrokeStartLineCap" Value="Round" />
                            <Setter Property="StrokeEndLineCap" Value="Round" />
                            <Setter Property="StrokeThickness" Value="4" />
                            <Setter Property="Stroke" Value="Bisque" />
                            <Setter Property="Fill" Value="Bisque" />
                        </Style>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style TargetType="telerik:SelfDrawingSeries">
                <Setter Property="BorderLineStyle">
                    <Setter.Value>
                        <Style TargetType="{x:Type Shape}" >
                            <Setter Property="StrokeStartLineCap" Value="Round" />
                            <Setter Property="StrokeEndLineCap" Value="Round" />
                            <Setter Property="StrokeThickness" Value="4" />
                            <Setter Property="Stroke" Value="#99E4B030" />
                            <Setter Property="Fill" Value="#99E4B030" />
                        </Style>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style TargetType="telerik:SelfDrawingSeries">
                <Setter Property="BorderLineStyle">
                    <Setter.Value>
                        <Style TargetType="{x:Type Shape}" >
                            <Setter Property="StrokeStartLineCap" Value="Round" />
                            <Setter Property="StrokeEndLineCap" Value="Round" />
                            <Setter Property="StrokeThickness" Value="4" />
                            <Setter Property="Stroke" Value="#99328691" />
                            <Setter Property="Fill" Value="#99328691" />
                        </Style>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style TargetType="telerik:SelfDrawingSeries">
                <Setter Property="BorderLineStyle">
                    <Setter.Value>
                        <Style TargetType="{x:Type Shape}" >
                            <Setter Property="StrokeStartLineCap" Value="Round" />
                            <Setter Property="StrokeEndLineCap" Value="Round" />
                            <Setter Property="StrokeThickness" Value="4" />
                            <Setter Property="Stroke" Value="#99218264" />
                            <Setter Property="Fill" Value="#99218264" />
                        </Style>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style TargetType="telerik:SelfDrawingSeries">
                <Setter Property="BorderLineStyle">
                    <Setter.Value>
                        <Style TargetType="{x:Type Shape}" >
                            <Setter Property="StrokeStartLineCap" Value="Round" />
                            <Setter Property="StrokeEndLineCap" Value="Round" />
                            <Setter Property="StrokeThickness" Value="4" />
                            <Setter Property="Stroke" Value="#99D8653A" />
                            <Setter Property="Fill" Value="#99D8653A" />
                        </Style>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style TargetType="telerik:SelfDrawingSeries">
                <Setter Property="BorderLineStyle">
                    <Setter.Value>
                        <Style TargetType="{x:Type Shape}" >
                            <Setter Property="StrokeStartLineCap" Value="Round" />
                            <Setter Property="StrokeEndLineCap" Value="Round" />
                            <Setter Property="StrokeThickness" Value="4" />
                            <Setter Property="Stroke" Value="#99707070" />
                            <Setter Property="Fill" Value="#99707070" />
                        </Style>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style TargetType="telerik:SelfDrawingSeries">
                <Setter Property="BorderLineStyle">
                    <Setter.Value>
                        <Style TargetType="{x:Type Shape}" >
                            <Setter Property="StrokeStartLineCap" Value="Round" />
                            <Setter Property="StrokeEndLineCap" Value="Round" />
                            <Setter Property="StrokeThickness" Value="4" />
                            <Setter Property="Stroke" Value="#9942979F" />
                            <Setter Property="Fill" Value="#9942979F" />
                        </Style>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style TargetType="telerik:SelfDrawingSeries">
                <Setter Property="BorderLineStyle">
                    <Setter.Value>
                        <Style TargetType="{x:Type Shape}" >
                            <Setter Property="StrokeStartLineCap" Value="Round" />
                            <Setter Property="StrokeEndLineCap" Value="Round" />
                            <Setter Property="StrokeThickness" Value="4" />
                            <Setter Property="Stroke" Value="#993795A3" />
                            <Setter Property="Fill" Value="#993795A3" />
                        </Style>
                    </Setter.Value>
                </Setter>
            </Style>
            <Style TargetType="telerik:SelfDrawingSeries">
                <Setter Property="BorderLineStyle">
                    <Setter.Value>
                        <Style TargetType="{x:Type Shape}" >
                            <Setter Property="StrokeStartLineCap" Value="Round" />
                            <Setter Property="StrokeEndLineCap" Value="Round" />
                            <Setter Property="StrokeThickness" Value="4" />
                            <Setter Property="Stroke" Value="#990A9366" />
                            <Setter Property="Fill" Value="#990A9366" />
                        </Style>
                    </Setter.Value>
                </Setter>
            </Style>
        </telerik:StylesPalette>
 
    </Grid.Resources>
 
    <Grid.Background>
        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFDCE7FD" Offset="1"/>
            <GradientStop Color="#FF898AAC" Offset="0"/>
        </LinearGradientBrush>
    </Grid.Background>
 
    <telerik:RadChart x:Name="RadChart1" Grid.Row="1" Grid.Column="1" telerik:StyleManager.Theme="Summer" />
</Grid>

Here is the code-behind that defines the actual line series and adds them to the RadChart:

C# Version

Random random = new Random(123456);
for (int seriesIndex = 0; seriesIndex < 2; seriesIndex++)
{
    DataSeries lineSeries = new DataSeries();
    lineSeries.Definition = new LineSeriesDefinition();
 
    for (int itemIndex = 0; itemIndex < 10; itemIndex++)
    {
        int randomNumber = random.Next(30, 100);
        lineSeries.Add(new DataPoint { YValue = randomNumber});
    }
 
    this.RadChart1.DefaultView.ChartArea.DataSeries.Add(lineSeries);
}

VB.NET Version

Dim random As New Random(123456)
Dim seriesIndex As Integer = 0
While seriesIndex < 2
    Dim lineSeries As New DataSeries()
    lineSeries.Definition = New LineSeriesDefinition()
 
    Dim itemIndex As Integer = 0
    While itemIndex < 10
        Dim randomNumber As Integer = random.[Next](30, 100)
        lineSeries.Add(New DataPoint())
        System.Math.Max(System.Threading.Interlocked.Increment(itemIndex),itemIndex - 1)
    End While
 
    Me.RadChart1.DefaultView.ChartArea.DataSeries.Add(lineSeries)
    System.Math.Max(System.Threading.Interlocked.Increment(seriesIndex),seriesIndex - 1)
End While


Here is the final chart image:

Chart Custom Palette

Comments

If you'd like to comment on this KB article, please, send us a Support Ticket.
Thank you!

Please Sign In to rate this article.