SplineAreaSeries color doesn't match what I've supplied

2 posts, 0 answers
  1. Vinnie Petre
    Vinnie Petre avatar
    5 posts
    Member since:
    Jul 2012

    Posted 07 Sep 2010 Link to this post


    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.
  2. Sia
    Sia avatar
    755 posts

    Posted 10 Sep 2010 Link to this post

    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
Back to Top