This is a migrated thread and some comments may be shown as answers.

SplineAreaSeries color doesn't match what I've supplied

1 Answer 33 Views
This is a migrated thread and some comments may be shown as answers.
Vinnie Petre
Top achievements
Rank 1
Vinnie Petre asked on 07 Sep 2010, 10:47 PM

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" >
        <SolidColorBrush Color="{StaticResource ChartSeriesDark}" />
        <telerik:SplineAreaSeriesDefinition LegendDisplayMode="None" ShowPointMarks="False" ShowItemLabels="False" ShowItemToolTips="False" />

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.

1 Answer, 1 is accepted

Sort by
Telerik team
answered on 10 Sep 2010, 01:12 PM
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()
    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.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,
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Asked by
Vinnie Petre
Top achievements
Rank 1
Answers by
Telerik team
Share this question