Customize Palette for telerik chart

When we use Telerik's chart to develop our silverlight application, it's important for us  to define  more perfect GUI, including theme, style and layout. Although Telerik has given much support on this, sometimes we also need to do some customization. For instance, when items source of chart are more than 30, the palette of chart area and chart legend will repeat. That's not we really wanted. See the following figure: 

So we want to remove duplicated colors by customizing palette. See the following steps:

1. Define chart in xaml:

View Code

   
   

    
     1 
    
    <
    
    UserControl 
    
    x:Class
    
    ="TelerikChartTest.MainPage"
    
    

    
     2 
    
     xmlns
    
    ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    
    

    
     3 
    
     xmlns:x
    
    ="http://schemas.microsoft.com/winfx/2006/xaml"
    
    

    
     4 
    
     xmlns:d
    
    ="http://schemas.microsoft.com/expression/blend/2008"
    
    

    
     5 
    
     xmlns:mc
    
    ="http://schemas.openxmlformats.org/markup-compatibility/2006"
    
    

    
     6 
    
     xmlns:sys
    
    ="clr-namespace:System;assembly=mscorlib"
    
    

    
     7 
    
     xmlns:telerik
    
    ="http://schemas.telerik.com/2008/xaml/presentation"
    
    

    
     8 
    
     xmlns:toolkit
    
    ="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"
    
    

    
     9 
    
     xmlns:sdk
    
    ="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
    
    

    
    10 
    
     xmlns:local
    
    ="clr-namespace:TelerikChartTest"
    
    >
    
    

    
    11 
    
     
    
    <
    
    telerik:RadChart 
    
    x:Name
    
    ="radChart"
    
    

    
    13 
    
     ItemsSource
    
    ="
    
    {Binding ChartItemsSource}
    
    "
    
    >
    
    

    
    14 
    
     
    
    <
    
    telerik:RadChart.SeriesMappings
    
    >
    
    

    
    15 
    
     
    
    <
    
    telerik:SeriesMapping
    
    >
    
    

    
    16 
    
     
    
    <
    
    telerik:SeriesMapping.SeriesDefinition
    
    >
    
    

    
    17 
    
     
    
    <
    
    telerik:PieSeriesDefinition 
    
    ShowItemToolTips
    
    ="True"
    
     

    
    18 
    
     ShowItemLabels
    
    ="False"
    
    >
    
    

    
    19 
    
     
    
    <
    
    telerik:PieSeriesDefinition.InteractivitySettings
    
    >
    
    

    
    20 
    
     
    
    <
    
    telerik:InteractivitySettings 
    
    SelectionMode
    
    ="Multiple"
    
     

    
    21 
    
     SelectionScope
    
    ="Item"
    
     

    
    22 
    
     HoverScope
    
    ="Item"
    
     
    
    />
    
    

    
    23 
    
     
    
    </
    
    telerik:PieSeriesDefinition.InteractivitySettings
    
    >
    
    

    
    24 
    
     
    
    </
    
    telerik:PieSeriesDefinition
    
    >
    
    

    
    25 
    
     
    
    </
    
    telerik:SeriesMapping.SeriesDefinition
    
    >
    
    

    
    26 
    
     
    
    <
    
    telerik:SeriesMapping.ItemMappings
    
    >
    
    

    
    27 
    
     
    
    <
    
    telerik:ItemMapping 
    
    FieldName
    
    ="Performance"
    
    

    
    28 
    
     DataPointMember
    
    ="YValue"
    
    >
    
    

    
    29 
    
     
    
    </
    
    telerik:ItemMapping
    
    >
    
    

    
    30 
    
     
    
    <
    
    telerik:ItemMapping 
    
    FieldName
    
    ="Acct"
    
    

    
    31 
    
     DataPointMember
    
    ="LegendLabel"
    
    >
    
    

    
    32 
    
     
    
    </
    
    telerik:ItemMapping
    
    >
    
    

    
    33 
    
     
    
    </
    
    telerik:SeriesMapping.ItemMappings
    
    >
    
    

    
    34 
    
     
    
    </
    
    telerik:SeriesMapping
    
    >
    
    

    
    35 
    
     
    
    </
    
    telerik:RadChart.SeriesMappings
    
    >
    
    

    
    36 
    
    

    
    37 
    
     
    
    </
    
    telerik:RadChart
    
    >
    
    

    
    38 
    
    

    
    39 
    
    
    
    </
    
    UserControl
    
    >
   
   

2. Specify items source for chart.

Chart Items Source 

   
   

    
     1 
    
     
    
    private
    
     List
    
    <
    
    PerformanceItem
    
    >
    
     chartItemsSource;

    
     2 
    
     
    
    public
    
     List
    
    <
    
    PerformanceItem
    
    >
    
     ChartItemsSource

    
     3 
    
     {

    
     4 
    
     
    
    get
    
    

    
     5 
    
     {

    
     6 
    
     
    
    if
    
     (chartItemsSource 
    
    ==
    
     
    
    null
    
    )

    
     7 
    
     {

    
     8 
    
     chartItemsSource 
    
    =
    
     
    
    new
    
     List
    
    <
    
    PerformanceItem
    
    >
    
    ();

    
     9 
    
     }

    
    10 
    
     
    
    return
    
     chartItemsSource;

    
    11 
    
     }

    
    12 
    
     
    
    set
    
    

    
    13 
    
     {

    
    14 
    
     chartItemsSource 
    
    =
    
     value;

    
    15 
    
     RaisePropertyChanged(
    
    "
    
    ChartItemsSource
    
    "
    
    );

    
    16 
    
     }

    
    17 
    
     }
   
   

Where performance item looks like:

View Code

   
   

    
     1 
    
     
    
    public
    
     
    
    class
    
     PerformanceItem

    
     2 
    
     {

    
     3 
    
     
    
    public
    
     
    
    int
    
     Acct { 
    
    get
    
    ; 
    
    set
    
    ; }

    
     4 
    
     
    
    public
    
     
    
    double
    
     Performance { 
    
    get
    
    ; 
    
    set
    
    ; }

    
     5 
    
     
    
    public
    
     PerformanceItem(
    
    int
    
     acct, 
    
    double
    
     performance)

    
     6 
    
     {

    
     7 
    
     Acct 
    
    =
    
     acct;

    
     8 
    
     Performance 
    
    =
    
     performance;

    
     9 
    
     }

    
    10 
    
     }
   
   

3. Initialize and apply palette for chart:

View Code

   
   

    
     1 
    
     
    
    public
    
     BrushCollection Palette

    
     2 
    
     {

    
     3 
    
     
    
    get
    
    ;

    
     4 
    
     
    
    set
    
    ;

    
     5 
    
     }

    
     6 
    
    

    
     7 
    
     
    
    private
    
     
    
    void
    
     InitializePalette()

    
     8 
    
     {

    
     9 
    
     BrushCollection dummyPalette 
    
    =
    
     
    
    new
    
     BrushCollection();

    
    10 
    
     Random random 
    
    =
    
     
    
    new
    
     Random();

    
    11 
    
    

    
    12 
    
     
    
    if
    
     (ChartItemsSource.Count 
    
    >
    
     
    
    0
    
    )

    
    13 
    
     {

    
    14 
    
     
    
    foreach
    
     (var item 
    
    in
    
     ChartItemsSource)

    
    15 
    
     {

    
    16 
    
     dummyPalette.Add(
    
    new
    
     SolidColorBrush(Color.FromArgb(
    
    255
    
    , (
    
    byte
    
    )random.Next(
    
    1
    
    , 
    
    255
    
    ), (
    
    byte
    
    )random.Next(
    
    1
    
    , 
    
    255
    
    ), (
    
    byte
    
    )random.Next(
    
    1
    
    , 
    
    255
    
    ))));

    
    17 
    
     }

    
    18 
    
     }

    
    19 
    
    

    
    20 
    
     
    
    this
    
    .Palette 
    
    =
    
     dummyPalette;

    
    21 
    
     }

    
    22 
    
    

    
    23 
    
     
    
    private
    
     
    
    void
    
     ApplyPalette()

    
    24 
    
     {

    
    25 
    
     
    
    foreach
    
     (Brush item 
    
    in
    
     
    
    this
    
    .Palette)

    
    26 
    
     {

    
    27 
    
     
    
    this
    
    .radChart.PaletteBrushes.Add(item);

    
    28 
    
     }

    
    29 
    
    

    
    30 
    
     
    
    this
    
    .radChart.PaletteBrushesUseSolidColors 
    
    =
    
     
    
    true
    
    ;

    
    31 
    
     
    
    this
    
    .radChart.DefaultSeriesDefinition.LegendDisplayMode 
    
    =
    
     LegendDisplayMode.DataPointLabel;

    
    32 
    
     
    
    this
    
    .radChart.Rebind();

    
    33 
    
     }
   
   

4. Generate items source when the page is loaded:

View Code

   
   

    
     1 
    
     
    
    private
    
     
    
    void
    
     GeneratePerformanceItems()

    
     2 
    
     {

    
     3 
    
     Random random 
    
    =
    
     
    
    new
    
     Random();

    
     4 
    
     List
    
    <
    
    PerformanceItem
    
    >
    
     items 
    
    =
    
     
    
    new
    
     List
    
    <
    
    PerformanceItem
    
    >
    
    ();

    
     5 
    
     
    
    for
    
     (
    
    int
    
     i 
    
    =
    
     
    
    0
    
    ; i 
    
    <
    
     
    
    30
    
    ; i
    
    ++
    
    )

    
     6 
    
     {

    
     7 
    
     PerformanceItem dummyItem 
    
    =
    
     
    
    new
    
     PerformanceItem(random.Next(), random.NextDouble());

    
     8 
    
     items.Add(dummyItem);

    
     9 
    
     }

    
    10 
    
    

    
    11 
    
     ChartItemsSource 
    
    =
    
     items;

    
    12 
    
     InitializePalette();

    
    13 
    
     ApplyPalette();

    
    14 
    
     }
   
   

The customized effect displays as following:

Note:

There are five or six themes in telerik controls, and if you select any other theme but Windows7 the palette customization seem to work, but not with Windows7. Find details in here and see demos in here.