Telerik blogs

RadChart comes with a versatile collection of preset themes (Summer, Vista, Office). 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 the control provides easy mechanism to achieve the desired effect.

RadChart 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.

<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="{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> 
          
<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> 
          
<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> 
          
<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> 
          
<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> 
          
<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> 
          
<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> 
          
<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> 
          
<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> 
          
<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> 
 
      
</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" /> 
</
Grid>  

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

public partial class Window1 : Window 
{ 
   
protected override void OnInitialized(EventArgs e) 
   
{ 
       
base.OnInitialized(e); 
 
       
FillSampleChartData(); 
   
} 
 
   
private void FillSampleChartData() 
   
{ 
       
for (int seriesIndex = 0; seriesIndex < 2; seriesIndex++) 
       
{ 
           
DataSeries lineSeries = new DataSeries(); 
           
lineSeries.Definition = new LineSeriesDefinition(); 
 
           
Random random = new Random((int)(lineSeries.GetHashCode() + DateTime.Now.Ticks)); 
           
for (int itemIndex = 0; itemIndex < 10; itemIndex++) 
           
{ 
               
int randomNumber = random.Next(30, 100); 
               
lineSeries.Add(new DataPoint { XValue = randomNumber, YValue = randomNumber }); 
           
} 
 
           
this.RadChart1.DefaultView.ChartArea.DataSeries.Add(lineSeries); 
       
} 
   
}  
} 

Here is the final chart image:

chart-custom-palette

 

Hope this helps.


Comments

Comments are disabled in preview mode.