[Solved] SplineAreaSeries color doesn't match what I've supplied

[Vinnie Petre]

Hello,

I'm trying to provide a custom color to a spline area chart, like so:

<telerik:RadChart x:Name="chart" ItemsSource="{Binding Cells}" BorderThickness="0" Style="{StaticResource SmallFont}" PaletteBrushesUseSolidColors="True" >
    <telerik:RadChart.PaletteBrushes>
        <SolidColorBrush Color="{StaticResource ChartSeriesDark}" />
    </telerik:RadChart.PaletteBrushes>
    <telerik:RadChart.DefaultSeriesDefinition>
        <telerik:SplineAreaSeriesDefinition LegendDisplayMode="None" ShowPointMarks="False" ShowItemLabels="False" ShowItemToolTips="False" />
    </telerik:RadChart.DefaultSeriesDefinition>

The static color resource, ChartSeriesDark, is defined below:

<Color x:Key="ChartSeriesDark">#FF111331</Color>

When I run the app, the chart's color is noticeably lighter than the intended color.  If I take a screenshot and sample it in a paint program, the hex color value is coming out as #FF272944.  Other uses of this color resource in our app sample correctly as #FF111331.

Can you please help me identify the source of the discrepancy?

I've tried providing a new ControlTemplate targeting BaseLineSeries as described here, but this results in a
Message: Sys.InvalidOperationException: ...  Layout cycle detected.  Layout could not complete.
 
I'm hoping I don't have to resort to retemplating to get the chart to display in the color I ask it to display in.

[Sia]

Hi Vinnie Petre,

The observed behavior is due to the way the theme style is applied. In order to apply your specific color without any processing on behalf of the chart control, please use the appearance API as follows (note that in the CreateItemStyleDelegate you need to override the default "theme" style for the series as demonstrated below) :

public MainPage()
{
    InitializeComponent();

    DataSeries dataSeries = new DataSeries();
    dataSeries.Definition = new SplineAreaSeriesDefinition();
    dataSeries.Definition.Appearance.Fill = new SolidColorBrush(Colors.Black);
    dataSeries.Definition.Appearance.Stroke = new SolidColorBrush(Colors.Black);
    dataSeries.Definition.Appearance.PointMark.Stroke = new SolidColorBrush(Colors.Black);

    dataSeries.Add(new DataPoint() { YValue = 41 });
    dataSeries.Add(new DataPoint() { YValue = 33 });
    dataSeries.Add(new DataPoint() { YValue = 25 });
    RadChart1.DefaultView.ChartArea.DataSeries.Add(dataSeries);
    RadChart1.CreateItemStyleDelegate = BuildCustomItemStyle;
}

private Style BuildCustomItemStyle(Control control, Style style, DataPoint dp, DataSeries ds)
{
    if (control is SelfDrawingSeries)
        return new Style(style.TargetType);

    return style;
}

I hope this helps you.


All the best,
Sia
the Telerik team