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

2 posts, 1 answers
  1. Yaroslav
    Yaroslav avatar
    122 posts
    Member since:
    Jan 2016

    Posted 12 Sep Link to this post

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

  2. Answer
    Dinko
    Admin
    Dinko avatar
    202 posts

    Posted 14 Sep Link to this post

    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
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  3. UI for WPF is Visual Studio 2017 Ready
Back to Top