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

RadChart's series colors | Where can they be found?

14 Answers 540 Views

Chart

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

Llewellyn asked on 13 Sep 2010, 12:15 PM

Hello,

In order to understand my problem better, please follow the instructions below.

Goto --> http://demos.telerik.com/silverlight/#Chart/CustomPalette

1. Select the windows7 Theme at the top.
2. Click the clear button at the bottom right (on the colour palette).

You will now see the windows7 theme colours being applied to each
bar in the series.

My question is, where can I find these colours so that I can reference them
when defining my own series.
The reason I need this is because we are standardising colours on our dashboards
and we need to control the order in which series colours are displayed.
We also wish to use the colours that RadChart has built in, as they are visually appealing.

I have attempted to match the colours myself but they are slightly off contrast wise and noticably so.
Do you know where I can find the built in RadChart colour collection used to represent each series in RadCharts?

Thank you for your time.

Llewellyn

14 Answers, 1 is accepted

answered on 14 Sep 2010, 05:57 PM

Hi Llewellyn,

I am happy to hear that you like the windows 7 theme. Bars series consists of Fill, and two masks over it. The two masks can be found in the Bars' template:

<LinearGradientBrush x:Key="BarMaskBrush" EndPoint="1,0.5" StartPoint="0,0.5" MappingMode="RelativeToBoundingBox">

<GradientStop Color="Transparent" Offset="0.2"/>

<GradientStop Color="#CCFFFFFF" Offset="0.48"/>

<GradientStop Color="Transparent" Offset="0.8"/>

<GradientStop Color="White" Offset="0.5"/>

<GradientStop Color="#CCFFFFFF" Offset="0.52"/>

</LinearGradientBrush>

<LinearGradientBrush x:Key="BarOpacityMaskBrush" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#CCFFFFFF" Offset="1"/>

<GradientStop Color="Transparent" Offset="0.4"/>

<GradientStop Color="#7FFFFFFF" Offset="0.8"/>

<GradientStop Color="#66FFFFFF" Offset="0.05"/>

</LinearGradientBrush>

<LinearGradientBrush x:Key="BarTopMaskBrush" EndPoint="1,0.5" StartPoint="0,0.5" MappingMode="RelativeToBoundingBox">

<GradientStop Color="#33FFFFFF" Offset="0.5"/>

<GradientStop Color="Transparent"/>

<GradientStop Color="Transparent" Offset="0.5"/>

<GradientStop Color="#33FFFFFF" Offset="1"/>

<GradientStop Color="Transparent" Offset="0.75"/>

</LinearGradientBrush>

<Style x:Key="CustomBar" TargetType="telerikCharting:Bar">

<Setter Property="Template" >

<Setter.Value>

<ControlTemplate TargetType="telerikCharting:Bar">

<Canvas Opacity="0" x:Name="PART_MainContainer">

<Rectangle x:Name="PART_DefiningGeometry"

Height="{TemplateBinding ItemActualHeight}"

Width="{TemplateBinding ItemActualWidth}"

Style="{TemplateBinding ItemStyle}"

RadiusX="10"

RadiusY="10" />

<Rectangle Height="{TemplateBinding ItemActualHeight}"

Width="{TemplateBinding ItemActualWidth}"

RadiusX="10"

RadiusY="10"

OpacityMask="{StaticResource BarOpacityMaskBrush}"

Fill="{StaticResource BarMaskBrush}" />

<Rectangle x:Name="PART_SelectedState"

Height="{TemplateBinding ItemActualHeight}"

Width="{TemplateBinding ItemActualWidth}"

RadiusX="10"

RadiusY="10"

Fill="{StaticResource BarTopMaskBrush}" />

<Canvas.RenderTransform>

<ScaleTransform x:Name="PART_AnimationTransform" ScaleY="0" />

</Canvas.RenderTransform>

<vsm:VisualStateManager.VisualStateGroups>

<vsm:VisualStateGroup x:Name="HoverStates">

<vsm:VisualState x:Name="Normal">

<Storyboard>

<DoubleAnimation To="1.0" Storyboard.TargetName="PART_MainContainer" Storyboard.TargetProperty="Opacity" Duration="0.00:00:00.15" />

</Storyboard>

</vsm:VisualState>

<vsm:VisualState x:Name="Hovered">

<Storyboard>

<DoubleAnimation To="1.0" Storyboard.TargetName="PART_MainContainer" Storyboard.TargetProperty="Opacity" Duration="0.00:00:00.15" />

</Storyboard>

</vsm:VisualState>

<vsm:VisualState x:Name="Hidden">

<Storyboard>

<DoubleAnimation To="0.15" Storyboard.TargetName="PART_MainContainer" Storyboard.TargetProperty="Opacity" Duration="0.00:00:00.15" />

</Storyboard>

</vsm:VisualState>

</vsm:VisualStateGroup>

<vsm:VisualStateGroup x:Name="SelectionStates">

<vsm:VisualState x:Name="Unselected">

</vsm:VisualState>

<vsm:VisualState x:Name="Selected">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_SelectedState" Duration="0.00:00:00.05" Storyboard.TargetProperty="Stroke">

<DiscreteObjectKeyFrame KeyTime="0.00:00:00.0">

<DiscreteObjectKeyFrame.Value>

<SolidColorBrush Color="#B2000000" />

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_SelectedState" Duration="0.00:00:00.05" Storyboard.TargetProperty="StrokeThickness">

<DiscreteObjectKeyFrame KeyTime="0.00:00:00.0">

<DiscreteObjectKeyFrame.Value>

<mscorlib:Double xmlns:mscorlib="clr-namespace:System;assembly=mscorlib">2</mscorlib:Double>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</vsm:VisualState>

</vsm:VisualStateGroup>

</vsm:VisualStateManager.VisualStateGroups>

</Canvas>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

Regarding the main color palette, you can find all gradients for background and all strokes below:

<Rectangle Stroke="stroke" RadiusX="2" RadiusY="2">

<Rectangle.Fill>

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="second" Offset="0"/>

<GradientStop Color="main" Offset="1"/>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

where you need to replace main, second and stroke with the following brushes:

1. First main color

<SolidColorBrush x:Key="main" Color="#FF87DAFF" />

<SolidColorBrush x:Key="second" Color="#B287B1FF" />

<SolidColorBrush x:Key="stroke" Color="#FF779EE8" />

2. Second main color

<SolidColorBrush x:Key="main" Color="#FFFF93DF" />

<SolidColorBrush x:Key="second" Color="#B2FF93ED" />

<SolidColorBrush x:Key="stroke" Color="#FFE274D0" />

3. Third main color

<SolidColorBrush x:Key="main" Color="#FFFFC378" />

<SolidColorBrush x:Key="second" Color="#B2FFB578" />

<SolidColorBrush x:Key="stroke" Color="#FFF2A667" />

4. Fourth main color

<SolidColorBrush x:Key="main" Color="#FFFF8470" />

<SolidColorBrush x:Key="second" Color="#B2FF708C" />

<SolidColorBrush x:Key="stroke" Color="#FFE4617B" />

5. Fifth main color

<SolidColorBrush x:Key="main" Color="#FF81FFE0" />

<SolidColorBrush x:Key="second" Color="#B281E3FF" />

<SolidColorBrush x:Key="stroke" Color="#FF4AD1F8" />

6. Sixth main color

<SolidColorBrush x:Key="main" Color="#FFD8FF74" />

<SolidColorBrush x:Key="second" Color="#B283FF74" />

<SolidColorBrush x:Key="stroke" Color="#FF6AE45C" />

7. Seventh main color

<SolidColorBrush x:Key="main" Color="#FFD37CFF" />

<SolidColorBrush x:Key="second" Color="#B2957CFF" />

<SolidColorBrush x:Key="stroke" Color="#FF8B72F2" />

8. Eighth main color

<SolidColorBrush x:Key="main" Color="#FFE6B0FE" />

<SolidColorBrush x:Key="second" Color="#B2CFA3FF" />

<SolidColorBrush x:Key="stroke" Color="#FFBB83F8" />

9. Ninth main color

<SolidColorBrush x:Key="main" Color="#FF9CB2C3" />

<SolidColorBrush x:Key="second" Color="#B290979F" />

<SolidColorBrush x:Key="stroke" Color="#FF828C98" />

10. Tenth main color

<SolidColorBrush x:Key="main" Color="#FFCDB08F" />

<SolidColorBrush x:Key="second" Color="#B2B9A497" />

<SolidColorBrush x:Key="stroke" Color="#FFA18B7E" />

Hope this helps.

Sincerely yours,
Sia
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

answered on 15 Sep 2010, 04:25 PM

Hello Sia,

Thank you for posting the template and colours. I appreciate it.

I put together a simple demo for anyone else who needs this with all the colours defined in the UserControl.Resources section for easy reference.
Included is one example of how to assign the bar colours programatically in each SeriesDefinition.

MainPage.xaml.cs

using System.Collections.Generic;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Media;

using Telerik.Windows.Controls.Charting;

namespace StackedBars_AxisXLabels

{

public partial class MainPage : UserControl

{

public MainPage()

{

InitializeComponent();

//new Windows7Theme().IsApplicationTheme = true;

#region chart data

FillSampleChartData();

var data = new List<User>();

data.Add(new User("Stock Ordered", 20, 37, 56, 67));

data.Add(new User("Stock Processed", 55, 120, 201, 33));

data.Add(new User("Stock Shipped", 23, 49, 55, 66));

data.Add(new User("Stock delivered", 47, 27, 103, 91));

RadChart1.ItemsSource = data;

#endregion

}

private void FillSampleChartData()

{

var sm1 = new SeriesMapping();

var bar1 = new BarSeriesDefinition();

bar1.StackGroupName = "Stack 1";

bar1.ItemStyle = Resources["CustomBar"] as Style;

sm1.SeriesDefinition = bar1;

// easy way

if (true)

{

sm1.SeriesDefinition.Appearance.Fill = Resources["Colour4"] as LinearGradientBrush;

sm1.SeriesDefinition.Appearance.Stroke = Resources["ColourStroke4"] as SolidColorBrush;

}

// same end result as above, but instead of defining our brushes in xaml, we programatically construct them.

else

{

// define gradient for first default telerik chart colour (blue)

var x = new GradientStopCollection

{

new GradientStop {Color = ColourHelper.HexColor("B287B1FF"), Offset = 0},

// second

new GradientStop {Color = ColourHelper.HexColor("FF87DAFF"), Offset = 1} // main

};

// set the linear gradient start/end points and suppy the gradient collection

var gradientColour1 = new LinearGradientBrush(x, 0)

{StartPoint = new Point(0.5, 0), EndPoint = new Point(0.5, 1)};

sm1.SeriesDefinition.Appearance.Fill = gradientColour1;

// set the stroke

sm1.SeriesDefinition.Appearance.Stroke = new SolidColorBrush(ColourHelper.HexColor("FF779EE8"));

}

sm1.LegendLabel = "Value1";

var im1 = new ItemMapping();

im1.DataPointMember = DataPointMember.YValue;

im1.FieldName = "Value1";

sm1.ItemMappings.Add(im1);

im1 = new ItemMapping();

im1.DataPointMember = DataPointMember.XCategory;

im1.FieldName = "Name";

sm1.ItemMappings.Add(im1);

var sm2 = new SeriesMapping();

var bar2 = new BarSeriesDefinition {ItemLabelFormat = "#STSUM"};

bar2.ItemStyle = Resources["CustomBar"] as Style;

//bar2.StackGroupName = "Stack 1";

sm2.SeriesDefinition = bar2;

sm2.SeriesDefinition.Appearance.Fill = Resources["Colour3"] as LinearGradientBrush;

sm2.SeriesDefinition.Appearance.Stroke = Resources["ColourStroke3"] as SolidColorBrush;

sm2.LegendLabel = "Value2";

var im2 = new ItemMapping();

im2.DataPointMember = DataPointMember.YValue;

im2.FieldName = "Value2";

sm2.ItemMappings.Add(im2);

im2 = new ItemMapping();

im2.DataPointMember = DataPointMember.XCategory;

im2.FieldName = "Name";

sm2.ItemMappings.Add(im2);

var sm3 = new SeriesMapping();

var bar3 = new BarSeriesDefinition();

bar3.ItemStyle = Resources["CustomBar"] as Style;

//bar3.StackGroupName = "Stack 1";

sm3.SeriesDefinition = bar3;

sm3.SeriesDefinition.Appearance.Fill = Resources["Colour2"] as LinearGradientBrush;

sm3.SeriesDefinition.Appearance.Stroke = Resources["ColourStroke2"] as SolidColorBrush;

sm3.LegendLabel = "Value3";

var im3 = new ItemMapping();

im3.DataPointMember = DataPointMember.YValue;

im3.FieldName = "Value3";

sm3.ItemMappings.Add(im3);

im3 = new ItemMapping();

im3.DataPointMember = DataPointMember.XCategory;

im3.FieldName = "Name";

sm3.ItemMappings.Add(im3);

var sm4 = new SeriesMapping();

var bar4 = new BarSeriesDefinition();

bar4.ItemStyle = Resources["CustomBar"] as Style;

//bar4.StackGroupName = "Stack 2";

sm4.SeriesDefinition = bar4;

sm4.SeriesDefinition.Appearance.Fill = Resources["Colour1"] as LinearGradientBrush;

sm4.SeriesDefinition.Appearance.Stroke = Resources["ColourStroke1"] as SolidColorBrush;

sm4.LegendLabel = "Value4";

var im4 = new ItemMapping();

im4.DataPointMember = DataPointMember.YValue;

im4.FieldName = "Value4";

sm4.ItemMappings.Add(im4);

im4 = new ItemMapping();

im4.DataPointMember = DataPointMember.XCategory;

im4.FieldName = "Name";

sm4.ItemMappings.Add(im4);

RadChart1.SeriesMappings.Add(sm1);

RadChart1.SeriesMappings.Add(sm2);

RadChart1.SeriesMappings.Add(sm3);

RadChart1.SeriesMappings.Add(sm4);

}

#region Nested type: User

public class User

{

public User(string name, double value1, double value2, double value3, double value4)

{

Name = name;

Value1 = value1;

Value2 = value2;

Value3 = value3;

Value4 = value4;

}

public string Name { get; set; }

public double Value1 { get; set; }

public double Value2 { get; set; }

public double Value3 { get; set; }

public double Value4 { get; set; }

}

#endregion

}

MainPage.xaml

<UserControl x:Class="StackedBars_AxisXLabels.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

mc:Ignorable="d" >

<UserControl.Resources>

<!-- this is our reference for the brushes below, match the main, second and stroke colours.

<SolidColorBrush x:Key="main" Color="#FF87DAFF" />

<SolidColorBrush x:Key="second" Color="#B287B1FF" />

<SolidColorBrush x:Key="stroke" Color="#FF779EE8" />

-->

<LinearGradientBrush x:Key="Colour1" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#B287B1FF" Offset="0"/> 

<GradientStop Color="#FF87DAFF" Offset="1"/> 

</LinearGradientBrush>

<SolidColorBrush x:Key="ColourStroke1" Color="#FF779EE8" /> 

<LinearGradientBrush x:Key="Colour2" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#B2FF93ED" Offset="0"/> 

<GradientStop Color="#FFFF93DF" Offset="1"/> 

</LinearGradientBrush>

<SolidColorBrush x:Key="ColourStroke2" Color="#FFE274D0" /> 

<LinearGradientBrush x:Key="Colour3" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#B2FFB578" Offset="0"/> 

<GradientStop Color="#FFFFC378" Offset="1"/> 

</LinearGradientBrush>

<SolidColorBrush x:Key="ColourStroke3" Color="#FFF2A667" /> 

<LinearGradientBrush x:Key="Colour4" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#B2FF708C" Offset="0"/> 

<GradientStop Color="#FFFF8470" Offset="1"/> 

</LinearGradientBrush>

<SolidColorBrush x:Key="ColourStroke4" Color="#FFE4617B" /> 

<LinearGradientBrush x:Key="Colour5" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#B281E3FF" Offset="0"/> 

<GradientStop Color="#FF81FFE0" Offset="1"/> 

</LinearGradientBrush>

<SolidColorBrush x:Key="ColourStroke5" Color="#FF4AD1F8" /> 

<LinearGradientBrush x:Key="Colour6" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#B283FF74" Offset="0"/> 

<GradientStop Color="#FFD8FF74" Offset="1"/> 

</LinearGradientBrush>

<SolidColorBrush x:Key="ColourStroke6" Color="#FF6AE45C" /> 

<LinearGradientBrush x:Key="Colour7" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#B2957CFF" Offset="0"/> 

<GradientStop Color="#FFD37CFF" Offset="1"/> 

</LinearGradientBrush>

<SolidColorBrush x:Key="ColourStroke7" Color="#FF8B72F2" /> 

<LinearGradientBrush x:Key="Colour8" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#B2CFA3FF" Offset="0"/> 

<GradientStop Color="#FFE6B0FE" Offset="1"/> 

</LinearGradientBrush>

<SolidColorBrush x:Key="ColourStroke8" Color="#FFBB83F8" /> 

<LinearGradientBrush x:Key="Colour9" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#B290979F" Offset="0"/> 

<GradientStop Color="#FF9CB2C3" Offset="1"/> 

</LinearGradientBrush>

<SolidColorBrush x:Key="ColourStroke9" Color="#FF828C98" /> 

<LinearGradientBrush x:Key="Colour10" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#B2B9A497" Offset="0"/> 

<GradientStop Color="#FFCDB08F" Offset="1"/> 

</LinearGradientBrush>

<SolidColorBrush x:Key="ColourStroke10" Color="#FFA18B7E" /> 

<LinearGradientBrush x:Key="BarMaskBrush" EndPoint="1,0.5" StartPoint="0,0.5" MappingMode="RelativeToBoundingBox">

<GradientStop Color="Transparent" Offset="0.2"/>

<GradientStop Color="#CCFFFFFF" Offset="0.48"/>

<GradientStop Color="Transparent" Offset="0.8"/>

<GradientStop Color="White" Offset="0.5"/>

<GradientStop Color="#CCFFFFFF" Offset="0.52"/>

</LinearGradientBrush>

<LinearGradientBrush x:Key="BarOpacityMaskBrush" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#CCFFFFFF" Offset="1"/>

<GradientStop Color="Transparent" Offset="0.4"/>

<GradientStop Color="#7FFFFFFF" Offset="0.8"/>

<GradientStop Color="#66FFFFFF" Offset="0.05"/>

</LinearGradientBrush>

<LinearGradientBrush x:Key="BarTopMaskBrush" EndPoint="1,0.5" StartPoint="0,0.5" MappingMode="RelativeToBoundingBox">

<GradientStop Color="#33FFFFFF" Offset="0.5"/>

<GradientStop Color="Transparent"/>

<GradientStop Color="Transparent" Offset="0.5"/>

<GradientStop Color="#33FFFFFF" Offset="1"/>

<GradientStop Color="Transparent" Offset="0.75"/>

</LinearGradientBrush>

<Style x:Key="CustomBar" TargetType="telerik:Bar">

<Setter Property="Template" >

<Setter.Value>

<ControlTemplate TargetType="telerik:Bar">

<Canvas Opacity="0" x:Name="PART_MainContainer">

<Rectangle x:Name="PART_DefiningGeometry"

Height="{TemplateBinding ItemActualHeight}"

Width="{TemplateBinding ItemActualWidth}"

Style="{TemplateBinding ItemStyle}"

RadiusX="10"

RadiusY="10" />

<Rectangle Height="{TemplateBinding ItemActualHeight}"

Width="{TemplateBinding ItemActualWidth}"

RadiusX="10"

RadiusY="10"

OpacityMask="{StaticResource BarOpacityMaskBrush}"

Fill="{StaticResource BarMaskBrush}" />

<Rectangle x:Name="PART_SelectedState"

Height="{TemplateBinding ItemActualHeight}"

Width="{TemplateBinding ItemActualWidth}"

RadiusX="10"

RadiusY="10"

Fill="{StaticResource BarTopMaskBrush}" />

<Canvas.RenderTransform>

<ScaleTransform x:Name="PART_AnimationTransform" ScaleY="0" />

</Canvas.RenderTransform>

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="HoverStates">

<VisualState x:Name="Normal">

<Storyboard>

<DoubleAnimation To="1.0" Storyboard.TargetName="PART_MainContainer" Storyboard.TargetProperty="Opacity" Duration="0.00:00:00.15" />

</Storyboard>

</VisualState>

<VisualState x:Name="Hovered">

<Storyboard>

<DoubleAnimation To="1.0" Storyboard.TargetName="PART_MainContainer" Storyboard.TargetProperty="Opacity" Duration="0.00:00:00.15" />

</Storyboard>

</VisualState>

<VisualState x:Name="Hidden">

<Storyboard>

<DoubleAnimation To="0.15" Storyboard.TargetName="PART_MainContainer" Storyboard.TargetProperty="Opacity" Duration="0.00:00:00.15" />

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="SelectionStates">

<VisualState x:Name="Unselected">

</VisualState>

<VisualState x:Name="Selected">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_SelectedState" Duration="0.00:00:00.05" Storyboard.TargetProperty="Stroke">

<DiscreteObjectKeyFrame KeyTime="0.00:00:00.0">

<DiscreteObjectKeyFrame.Value>

<SolidColorBrush Color="#B2000000" />

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_SelectedState" Duration="0.00:00:00.05" Storyboard.TargetProperty="StrokeThickness">

<DiscreteObjectKeyFrame KeyTime="0.00:00:00.0">

<DiscreteObjectKeyFrame.Value>

<mscorlib:Double xmlns:mscorlib="clr-namespace:System;assembly=mscorlib">2</mscorlib:Double>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

</Canvas>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="White">

<telerik:RadChart x:Name="RadChart1" />

</Grid>

</UserControl>

cheers,

Llewellyn

answered on 16 Sep 2010, 01:40 PM

Hello Sia,

The colour template you gave me helped solve my problems with Bar Charts.
I attempted to apply these to a LineSeriesDefinition(Line Chart) with a little success.
I'm running into a problem in getting the LineSeries LegendItemMarker colour working using the BarSeries colour template you gave me.
When using BarSeriesDefinitions the legend looks fine. So this tells me maybe the Gradient Template I'm using is incorrect for LineSeries...

Previously you supplied me with a Gradient Template for the Bar Chart along with names(second,main) to indicate where to place the colours.

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="second" Offset="0"/>

<GradientStop Color="main" Offset="1"/>

</LinearGradientBrush>

Could you possibly also supply me with a Gradient Template for use with the Line chart?

Best,

Llewellyn

answered on 21 Sep 2010, 03:55 PM

ticket-sl-lineretemplate.zip

Hi Llewellyn,

You do not need to re-template a Line series in order to change its stroke. Please find attached a modified version of your project and let me know if this is what you want to achieve.

Best wishes,
Sia
the Telerik team

answered on 22 Sep 2010, 02:36 PM

Hello Sia,

Thanks for getting back to me on this.

The small problem I am having is with Telerik colours (you provided me with) when using a lineseries definition.
When I apply custom colours to the lineseries they dont match 100% to the colours telerik uses.
Yet, if I switch back to a BarSeriesDefinition on RadChart1 the colours are then identical. So it seems to me the LineSeriesDefinition needs the custom colours to maybe be defined in a different way...?

I've slightly modified the code you sent me, simplified it a bit and added a second RadChart (RadChart2) to demonstrate better the differences between RadChart1 which uses manually assigned Telerik colours and RadChart2 which gets its colours from the Telerik default/theme brushes.

Also, notice that when you switch RadChart1 over to using a BarSeriesDefinition, the colours match again with RadChart2.

Here is the code. You can copy and replace the contents into the previous solution you sent me.
Just remember to add a reference to the following theme:
C:\Program Files\Telerik\RadControls for Silverlight Q1 2010 SP2\Binaries\Silverlight\Telerik.Windows.Themes.Windows7.dll

MainPage.xaml

<UserControl x:Class="SilverlightApplication1.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" xmlns:System="clr-namespace:System;assembly=mscorlib" xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows" xmlns:mscorlib="clr-namespace:System;assembly=mscorlib" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation">

<UserControl.Resources>

<LinearGradientBrush x:Key="Colour1" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#B287B1FF" Offset="0" />

<GradientStop Color="#FF87DAFF" Offset="1" />

</LinearGradientBrush>

<SolidColorBrush x:Key="ColourStroke1" Color="#FF779EE8" />

<LinearGradientBrush x:Key="Colour2" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#B2FF93ED" Offset="0" />

<GradientStop Color="#FFFF93DF" Offset="1" />

</LinearGradientBrush>

<SolidColorBrush x:Key="ColourStroke2" Color="#FFE274D0" />

<LinearGradientBrush x:Key="Colour3" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#B2FFB578" Offset="0" />

<GradientStop Color="#FFFFC378" Offset="1" />

</LinearGradientBrush>

<SolidColorBrush x:Key="ColourStroke3" Color="#FFF2A667" />

<LinearGradientBrush x:Key="Colour4" EndPoint="0.5,1" StartPoint="0.5,0">

<GradientStop Color="#B2FF708C" Offset="0" />

<GradientStop Color="#FFFF8470" Offset="1" />

</LinearGradientBrush>

<SolidColorBrush x:Key="ColourStroke4" Color="#FFE4617B" />

</UserControl.Resources>

<Grid x:Name="LayoutRoot">

<Grid.RowDefinitions>

<RowDefinition Height="*" />

</Grid.RowDefinitions>

<telerik:RadChart x:Name="RadChart1" Grid.Row="0" />

<telerik:RadChart x:Name="RadChart2" Grid.Row="1" />

</Grid>

</UserControl>

MainPage.xaml.cs

using System.Collections.Generic;

using System.Windows.Controls;

using System.Windows.Media;

using Telerik.Windows.Controls;

using Telerik.Windows.Controls.Charting;

namespace SilverlightApplication1

{

public partial class MainPage : UserControl

{

public MainPage()

{

InitializeComponent();

#region chart data

FillRadchart1();

FillRadchart2();

var data = new List<User>();

data.Add(new User("Stock Ordered", 20, 37, 56, 67));

data.Add(new User("Stock Processed", 55, 120, 201, 33));

data.Add(new User("Stock Shipped", 23, 49, 55, 66));

data.Add(new User("Stock delivered", 47, 27, 103, 91));

RadChart1.ItemsSource = data;

RadChart2.ItemsSource = data;

#endregion

new Windows7Theme().IsApplicationTheme = true;

}

/// <summary>

/// RadChart1 has custom colours set for it.

/// Notice the colours dont match 100% those used by Telerik for RadChart2.

/// Note that it does match if we change the seriesdefinition to barseries.

/// </summary>

private void FillRadchart1()

{

var sm1 = new SeriesMapping();

var bar1 = new LineSeriesDefinition(); //var bar1 = new BarSeriesDefinition(); // note : change to bar series and the colours match RadChart2

sm1.SeriesDefinition = bar1;

sm1.SeriesDefinition.Appearance.Fill = Resources["Colour1"] as LinearGradientBrush;

sm1.SeriesDefinition.Appearance.Stroke = Resources["ColourStroke1"] as SolidColorBrush;

sm1.SeriesDefinition.Appearance.PointMark.Stroke = Resources["ColourStroke1"] as SolidColorBrush;

sm1.LegendLabel = "Value1";

var im1 = new ItemMapping();

im1.DataPointMember = DataPointMember.YValue;

im1.FieldName = "Value1";

sm1.ItemMappings.Add(im1);

im1 = new ItemMapping();

im1.DataPointMember = DataPointMember.XCategory;

im1.FieldName = "Name";

sm1.ItemMappings.Add(im1);

var sm2 = new SeriesMapping();

var bar2 = new LineSeriesDefinition {ItemLabelFormat = "#STSUM"};

sm2.SeriesDefinition = bar2;

sm2.SeriesDefinition.Appearance.Fill = Resources["Colour2"] as LinearGradientBrush;

sm2.SeriesDefinition.Appearance.Stroke = Resources["ColourStroke2"] as SolidColorBrush;

sm2.SeriesDefinition.Appearance.PointMark.Stroke = Resources["ColourStroke2"] as SolidColorBrush;

sm2.LegendLabel = "Value2";

var im2 = new ItemMapping();

im2.DataPointMember = DataPointMember.YValue;

im2.FieldName = "Value2";

sm2.ItemMappings.Add(im2);

im2 = new ItemMapping();

im2.DataPointMember = DataPointMember.XCategory;

im2.FieldName = "Name";

sm2.ItemMappings.Add(im2);

var sm3 = new SeriesMapping();

var bar3 = new LineSeriesDefinition();

sm3.SeriesDefinition = bar3;

sm3.SeriesDefinition.Appearance.Fill = Resources["Colour3"] as LinearGradientBrush;

sm3.SeriesDefinition.Appearance.Stroke = Resources["ColourStroke3"] as SolidColorBrush;

sm3.SeriesDefinition.Appearance.PointMark.Stroke = Resources["ColourStroke3"] as SolidColorBrush;

sm3.LegendLabel = "Value3";

var im3 = new ItemMapping();

im3.DataPointMember = DataPointMember.YValue;

im3.FieldName = "Value3";

sm3.ItemMappings.Add(im3);

im3 = new ItemMapping();

im3.DataPointMember = DataPointMember.XCategory;

im3.FieldName = "Name";

sm3.ItemMappings.Add(im3);

var sm4 = new SeriesMapping();

var bar4 = new LineSeriesDefinition();

sm4.SeriesDefinition = bar4;

sm4.SeriesDefinition.Appearance.Fill = Resources["Colour4"] as LinearGradientBrush;

sm4.SeriesDefinition.Appearance.Stroke = Resources["ColourStroke4"] as SolidColorBrush;

sm4.SeriesDefinition.Appearance.PointMark.Stroke = Resources["ColourStroke4"] as SolidColorBrush;

sm4.LegendLabel = "Value4";

var im4 = new ItemMapping();

im4.DataPointMember = DataPointMember.YValue;

im4.FieldName = "Value4";

sm4.ItemMappings.Add(im4);

im4 = new ItemMapping();

im4.DataPointMember = DataPointMember.XCategory;

im4.FieldName = "Name";

sm4.ItemMappings.Add(im4);

RadChart1.SeriesMappings.Add(sm1);

RadChart1.SeriesMappings.Add(sm2);

RadChart1.SeriesMappings.Add(sm3);

RadChart1.SeriesMappings.Add(sm4);

}

/// <summary>

/// RadChart2 has no custom colours set for it. Telerik auto populates the colours.

/// Notice the more natural tone of colours, especially for the legend item.

/// </summary>

private void FillRadchart2()

{

var sm1 = new SeriesMapping();

var bar1 = new LineSeriesDefinition();

sm1.SeriesDefinition = bar1;

sm1.LegendLabel = "Value1";

var im1 = new ItemMapping();

im1.DataPointMember = DataPointMember.YValue;

im1.FieldName = "Value1";

sm1.ItemMappings.Add(im1);

im1 = new ItemMapping();

im1.DataPointMember = DataPointMember.XCategory;

im1.FieldName = "Name";

sm1.ItemMappings.Add(im1);

var sm2 = new SeriesMapping();

var bar2 = new LineSeriesDefinition {ItemLabelFormat = "#STSUM"};

sm2.SeriesDefinition = bar2;

sm2.LegendLabel = "Value2";

var im2 = new ItemMapping();

im2.DataPointMember = DataPointMember.YValue;

im2.FieldName = "Value2";

sm2.ItemMappings.Add(im2);

im2 = new ItemMapping();

im2.DataPointMember = DataPointMember.XCategory;

im2.FieldName = "Name";

sm2.ItemMappings.Add(im2);

var sm3 = new SeriesMapping();

var bar3 = new LineSeriesDefinition();

sm3.SeriesDefinition = bar3;

sm3.LegendLabel = "Value3";

var im3 = new ItemMapping();

im3.DataPointMember = DataPointMember.YValue;

im3.FieldName = "Value3";

sm3.ItemMappings.Add(im3);

im3 = new ItemMapping();

im3.DataPointMember = DataPointMember.XCategory;

im3.FieldName = "Name";

sm3.ItemMappings.Add(im3);

var sm4 = new SeriesMapping();

var bar4 = new LineSeriesDefinition();

sm4.SeriesDefinition = bar4;

sm4.LegendLabel = "Value4";

var im4 = new ItemMapping();

im4.DataPointMember = DataPointMember.YValue;

im4.FieldName = "Value4";

sm4.ItemMappings.Add(im4);

im4 = new ItemMapping();

im4.DataPointMember = DataPointMember.XCategory;

im4.FieldName = "Name";

sm4.ItemMappings.Add(im4);

RadChart2.SeriesMappings.Add(sm1);

RadChart2.SeriesMappings.Add(sm2);

RadChart2.SeriesMappings.Add(sm3);

RadChart2.SeriesMappings.Add(sm4);

}

#region Nested type: User

public class User

{

public User(string name, double value1, double value2, double value3, double value4)

{

Name = name;

Value1 = value1;

Value2 = value2;

Value3 = value3;

Value4 = value4;

}

public string Name { get; set; }

public double Value1 { get; set; }

public double Value2 { get; set; }

public double Value3 { get; set; }

public double Value4 { get; set; }

}

#endregion

}

Thanks,

Llewellyn

answered on 27 Sep 2010, 01:39 PM

ticket-sl-lineretemplate-mod.zip

Hello Llewellyn,

Thank you for contacting us.

Generally the conversion of the "base" colors to the more natural colors displayed in the built-in theme is the result of a rather complex internal HSB mapping algorithm implemented in the RadChart control.

It is possible to achieve the same color nuances in your application as well but you will need to replace the Appearance API setters in the code behind with a declaration of StyleBuilderData object instance that holds the necessary colors and mappings in the UserControl.Resources (the key should be "StyleBuilderData" so the control can pick the correct resource up).

Attached is a modified version of the sample application so you can decide which approach you would like to stick to.

Hope this helps.

Best wishes,
Freddie
the Telerik team

answered on 02 Oct 2010, 02:06 PM

difference-in-colours.png

Hi Freddia,

Thanks for the informative reply.

The real problem I am facing is when I use a LineSeriesDefinition the line/legend colours are slightly off.
This problem doesnt occurs only when I use the BarSeriesDefinition, only with the LineSeriesDefinition.

To assist in understanding this problem better I've run the code provided in my previous post and taken a picture of the colours.

The top RadChart uses the colours the Sia provided, those that Telerik RadChart is using by default (as I understand.)
The Top RadChart will display these colours perfectly if I use a BarSeriesDefinition, but when I switch to LineSeriesDef the colours appear slightly off.

The second RadChart (2) I added is there to show the differences between the colours.

Any advice or ideas I follow up on to get the top RadChart1 (using LineSeriedDef) to match the Bottom RadChart2 will be very welcome.
Just a reminder that when RadChart1's seriesmappings are configured to a BarSeriesDefinition, all the colours match those of RadChart2.

Thanks,

Llewellyn

answered on 06 Oct 2010, 07:07 PM

Hi Freddie,

>> Could you confirm whether you have reviewed the sample project we sent you in our previous reply?
>> We believe it demonstrates how to achieve the desired functionality for Line series as well (albeit the implementation is rather complex).

Yes, when you first posted it I spent a few hours attempting to figure out how to use it. You are right, it is complex.
I had trouble determining where exactly I had to set and use the StyleBuilderData template in the RadChart.

Can you provide an example of how to implement/assign StyleBuilderData in RadChart?
Also, if you know of an easier way, I'm all ears.

Best,

Llewellyn

answered on 11 Oct 2010, 05:36 PM

Hello Llewellyn,

The sample application provided earlier demonstrates how to use the StyleBuilderData class -- you need only to make sure the resource is placed in the top level UserControl.Resources dictionary and its key is "StyleBuilderData" -- you cannot "set" it as a property as this functionality is generally not exposed publicly (the HSB algorithm and the specific theme mappings are normally part of the internal implementation).

Unfortunately there is no easier way to achieve exactly the appearance of the Windows7 theme palette colors in the default Office_Black theme.

Best wishes,
Freddie
the Telerik team

answered on 26 Aug 2011, 09:15 AM

Hi all,

This is working fine ..thanks

But not working when the case of Grouping. why because in the case of grouping we are using only one seriesdeffination so we can not apply different colors to one series definition.

ex:

BarSeriesDefinition brc = new BarSeriesDefinition();

            SeriesMapping seriesMapping = new SeriesMapping();
            ItemMapping itemMapping = new ItemMapping();
            seriesMapping.SeriesDefinition = brc;

            seriesMapping.SeriesDefinition.Appearance.Fill = Resources[strcolor1] as LinearGradientBrush;
            seriesMapping.SeriesDefinition.Appearance.Stroke = Resources[strcolor2] as SolidColorBrush;
            seriesMapping.SeriesDefinition.Appearance.PointMark.Stroke = Resources[strcolor3] as SolidColorBrush;

brc.ShowItemLabels = false;

seriesMapping.GroupingSettings.GroupDescriptors.Add(new ChartGroupDescriptor("Level"));

            itemMapping = new ItemMapping();
            itemMapping.DataPointMember = DataPointMember.XCategory;
            itemMapping.FieldName = "Name";
            seriesMapping.ItemMappings.Add(itemMapping);

            itemMapping = new ItemMapping();
            itemMapping.DataPointMember = DataPointMember.YValue;
            itemMapping.FieldName = "Value";
            seriesMapping.ItemMappings.Add(itemMapping);

seriesMapping.ChartArea = chartArea1;
radChart.SeriesMappings.Add(seriesMapping);

in above case all the bars are displaying same colors.because we are applying color to seriesdefinition.
In this case how can i apply different colors to each bar.

Thanks In advance
-Vijay kommalapati

answered on 31 Aug 2011, 08:32 AM

Hello Vijay,

There are two approaches which you can choose from to have different Colors for each of your bars:

1. You can use the LegendDisplayMode property of the Series to DataPointLabel. This way they will appear with different colors(taken from the Theme). This is shown in our online documentation.
2. You may review this help topic where it is described how to use the MVVM pattern to get a better control over the colors of the bars of a single series.

All the best,
Evgenia
the Telerik team

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

RadChart's series colors | Where can they be found?

14 Answers, 1 is accepted