How to set different color for each SplineSeries if I use RadCartesianChart.SeriesProvider?

[Dmitry]

Hello. I'm sorry for being bothersome. I use telerik:ChartSeriesProvider for visualizing of variable number of Spline series. I want each curve (series) has its own color. I've written the following XAML markup for it:

<UserControl x:Class="DeviceReading.Views.AutomaticGainControlView"
             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"
             xmlns:prism="http://prismlibrary.com/"
             xmlns:local="clr-namespace:DeviceReading"
             prism:ViewModelLocator.AutoWireViewModel="True">

    <UserControl.Resources>
        <telerik:ChartPalette x:Key="customPalette">
            <telerik:ChartPalette.SeriesEntries>
                <telerik:PaletteEntryCollection SeriesFamily="Spline">
                    <telerik:PaletteEntry Fill="DarkBlue" Stroke="DarkBlue"/>
                    <telerik:PaletteEntry Fill="Purple" Stroke="Purple"/>
                    <telerik:PaletteEntry Fill="Red" Stroke="Red"/>
                    <telerik:PaletteEntry Fill="Green" Stroke="Green"/>
                    <telerik:PaletteEntry Fill="Cyan" Stroke="Cyan"/>
                    <telerik:PaletteEntry Fill="Sienna" Stroke="Sienna"/>
                    <telerik:PaletteEntry Fill="Magenta" Stroke="Magenta"/>
                    <telerik:PaletteEntry Fill="DodgerBlue" Stroke="DodgerBlue"/>
                </telerik:PaletteEntryCollection>
            </telerik:ChartPalette.SeriesEntries>
        </telerik:ChartPalette>
    </UserControl.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <telerik:RadCartesianChart Visibility="{Binding IsAbsoluteSplineChartVisible}" Palette="{StaticResource customPalette}">

            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:DateTimeContinuousAxis MajorStepUnit="Second" LabelInterval="5" LabelFormat="hh:mm:ss" FontFamily="Segoe UI" PlotMode="OnTicks" TickOrigin="{Binding AlignmentDate}"/>
            </telerik:RadCartesianChart.HorizontalAxis>

            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:LinearAxis FontFamily="Segoe UI" Title="Decibels [Db]" />
            </telerik:RadCartesianChart.VerticalAxis>

            <telerik:RadCartesianChart.Grid>
                <telerik:CartesianChartGrid MajorLinesVisibility="XY" MajorXLineDashArray="3,4" MajorYLineDashArray="3,4"/>
            </telerik:RadCartesianChart.Grid>

            <telerik:RadCartesianChart.SeriesProvider>
                <telerik:ChartSeriesProvider Source="{Binding SeriesData}">
                    <telerik:ChartSeriesProvider.SeriesDescriptors>
                        <telerik:CategoricalSeriesDescriptor CategoryPath="Category" ValuePath="Value" ItemsSourcePath="ChartPoints">
                            <telerik:CategoricalSeriesDescriptor.TypeConverter>
                                <local:SeriesTypeConverter/>
                            </telerik:CategoricalSeriesDescriptor.TypeConverter>
                        </telerik:CategoricalSeriesDescriptor>
                    </telerik:ChartSeriesProvider.SeriesDescriptors>
                </telerik:ChartSeriesProvider>
            </telerik:RadCartesianChart.SeriesProvider>

        </telerik:RadCartesianChart>
    </Grid>
</UserControl>

Just in case below is SeriesTypeConverter definition.

public class SeriesTypeConverter : IValueConverter
{  public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
 {
   SeriesModel seriesItem = value as SeriesModel;

   if (seriesItem.SeriesType == "Spline")
   {
      return typeof(SplineSeries);
   }
   else if (seriesItem.SeriesType == "Line")
   {
      return typeof(LineSeries);
   }
   else
   {
      return typeof(BarSeries);
   }
   }

 public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
 {
   /*throw new NotImplementedException()*/return null;
    }

}

The number of series now is vary from 2 to 8 (but upper bound may be larger and will, say 16). As you can see from XAML, I've define my own color palette (customPalette). I bag your pardon, but I do not know how to use it in my XAML, to each curve (series) had its own different color. Now all displayed series (1, 2, 3, 4,...8) are dark blue (have  DarkBlue color which is the first in 'customPalette'). Please tell me, how do I do so that each curve had its own different color. And that this color does not change with each session of the program.

[Dinko | Tech Support Engineer]

Hello Yaroslav,

Thank you for the provided code snippet.

In order to apply different colors to the SplineSeries, you can set the SeriesFamily property of the PaletteEntryCollection to Line. 

<telerik:PaletteEntryCollection SeriesFamily="Line">

Regards,
Dinko
Telerik by Progress