
I am newbie for Charts.
I have changed chart background color to Gray. bt, now I want to change my Fontcolor to Black.
Please help.....
11 Answers, 1 is accepted
You can use the following properties to achieve the desired effect:
- RadChart.AxisElementBrush (changes the color of the axis elements like axis line, ticks, etc).
- RadChart.AxisForeground (changes the color of the axis labels)
<
control:RadChart
x:Name
=
"RadChart1"
Background
=
"Gray"
AxisElementBrush
=
"Black"
AxisForeground
=
"Black"
/>
Hope this helps.
Best wishes,
Freddie
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.

Thanks for your valuable response.
I am using 2009.3.1314.1030 version of charting.
These properties giving me errors.
You can achieve the desired effect like this with the old version of the control:
XAML:
<
UserControl
x:Class
=
"SilverlightApplication1.MainPage"
xmlns:d
=
"http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc
=
"http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:control
=
"clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Charting"
xmlns:telerikCharting
=
"clr-namespace:Telerik.Windows.Controls.Charting;assembly=Telerik.Windows.Controls.Charting"
mc:Ignorable
=
"d"
d:DesignWidth
=
"640"
d:DesignHeight
=
"480"
>
<
Grid
x:Name
=
"LayoutRoot"
>
<
Grid.Resources
>
<
Style
x:Key
=
"CustomAxisXStyle"
TargetType
=
"telerikCharting:AxisX2D"
>
<
Setter
Property
=
"Foreground"
Value
=
"Black"
/>
</
Style
>
<
Style
x:Key
=
"CustomAxisYStyle"
TargetType
=
"telerikCharting:AxisY2D"
>
<
Setter
Property
=
"Foreground"
Value
=
"Black"
/>
</
Style
>
</
Grid.Resources
>
<
control:RadChart
x:Name
=
"RadChart1"
Background
=
"Gray"
/>
</
Grid
>
</
UserControl
>
C#:
RadChart1.DefaultView.ChartArea.AxisXStyle =
this
.LayoutRoot.Resources[
"CustomAxisXStyle"
]
as
Style;
RadChart1.DefaultView.ChartArea.AxisYStyle =
this
.LayoutRoot.Resources[
"CustomAxisYStyle"
]
as
Style;
RadChart1.DefaultSeriesDefinition =
new
LineSeriesDefinition() { ShowItemLabels =
false
};
RadChart1.ItemsSource =
new
int
[] { 1, 5, 7, 2, 4 };
Hope this helps.
Regards,
Freddie
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.

I tried changing the following:
<
Color
x:Key
=
"AxisLineColor"
>Black</
Color
>
<
Color
x:Key
=
"AxisItemLineColor"
>Black</
Color
>
<
Color
x:Key
=
"GridLineColor"
>Black</
Color
>
I also tried changing the following:
<
SolidColorBrush
x:Key
=
"AxisTitleForeground"
Color
=
"Black"
/>
<
SolidColorBrush
x:Key
=
"PrimaryAxisYTitleBorderBrush"
Color
=
"Black"
/>
<
SolidColorBrush
x:Key
=
"SecondaryAxisYTitleBorderBrush"
Color
=
"Black"
/>
Additionally, I tried "#00000000" and "FF000000" as the color.
I have set up a custom theme with the mentioned version of our controls. Actually changing the following xaml works on my end:
<
SolidColorBrush
x:Key
=
"AxisTitleForeground"
Color
=
"Red"
/>
<
SolidColorBrush
x:Key
=
"AxisStroke"
Color
=
"Red"
/>
Could you please try to change the chart.xaml and check if this works? If not, I will need more information about your scenario and your project.
Regards,
Sia
the Telerik team

...
<
SolidColorBrush
x:Key
=
"AxisLabel2DForeground"
Color
=
"#FF000000"
/>
...
...
<
Style
TargetType
=
"telerikCharting:AxisLabel2D"
>
<
Setter
Property
=
"Foreground"
Value
=
"{StaticResource AxisLabel2DForeground}"
/>
<
Setter
Property
=
"Template"
>
<
Setter.Value
>
<
ControlTemplate
TargetType
=
"telerikCharting:AxisLabel2D"
>
...

by the code above i was only able to change the label for axis x and axis y.
i am using the older version
this code is working for me
RadChart1.DefaultView.ChartArea.AxisXStyle =
this
.LayoutRoot.Resources[
"CustomAxisXStyle"
]
as
Style;
RadChart1.DefaultView.ChartArea.AxisYStyle =
this
.LayoutRoot.Resources[
"CustomAxisYStyle"
]
as
Style;
but it only changes the lable and not the lines color
also i waqnt to change the legend item font color
Thank you!
You can achieve the desired effect for older versions of the control like this:
XAML
<
UserControl
x:Class
=
"SilverlightApplication1.MainPage"
xmlns:telerik
=
"http://schemas.telerik.com/2008/xaml/presentation"
mc:Ignorable
=
"d"
xmlns:mscorlib
=
"clr-namespace:System;assembly=mscorlib"
xmlns:demo
=
"clr-namespace:SilverlightApplication1"
d:DesignHeight
=
"300"
d:DesignWidth
=
"400"
>
<
Grid
x:Name
=
"LayoutRoot"
>
<
Grid.Resources
>
<
Style
x:Key
=
"CustomAxisXStyle"
TargetType
=
"telerik:AxisX2D"
>
<
Setter
Property
=
"Foreground"
Value
=
"Red"
/>
<
Setter
Property
=
"AxisLineStyle"
>
<
Setter.Value
>
<
Style
TargetType
=
"Line"
>
<
Setter
Property
=
"Stroke"
Value
=
"Red"
/>
<
Setter
Property
=
"StrokeThickness"
Value
=
"1"
/>
</
Style
>
</
Setter.Value
>
</
Setter
>
</
Style
>
<
Style
x:Key
=
"CustomAxisYStyle"
TargetType
=
"telerik:AxisY2D"
>
<
Setter
Property
=
"Foreground"
Value
=
"Red"
/>
<
Setter
Property
=
"AxisLineStyle"
>
<
Setter.Value
>
<
Style
TargetType
=
"Line"
>
<
Setter
Property
=
"Stroke"
Value
=
"Red"
/>
<
Setter
Property
=
"StrokeThickness"
Value
=
"1"
/>
</
Style
>
</
Setter.Value
>
</
Setter
>
</
Style
>
<
Style
x:Key
=
"CustomTickLineXStyle"
TargetType
=
"Line"
>
<
Setter
Property
=
"Stroke"
Value
=
"Red"
/>
<
Setter
Property
=
"StrokeThickness"
Value
=
"1"
/>
<
Setter
Property
=
"Y1"
Value
=
"0"
/>
<
Setter
Property
=
"Y2"
Value
=
"10"
/>
</
Style
>
<
Style
x:Key
=
"CustomTickLineYStyle"
TargetType
=
"Line"
>
<
Setter
Property
=
"Stroke"
Value
=
"Red"
/>
<
Setter
Property
=
"StrokeThickness"
Value
=
"1"
/>
<
Setter
Property
=
"X1"
Value
=
"0"
/>
<
Setter
Property
=
"X2"
Value
=
"10"
/>
</
Style
>
<
Style
x:Key
=
"CustomMinorTickLineYStyle"
TargetType
=
"Line"
>
<
Setter
Property
=
"Stroke"
Value
=
"Red"
/>
<
Setter
Property
=
"StrokeThickness"
Value
=
"1"
/>
<
Setter
Property
=
"X1"
Value
=
"0"
/>
<
Setter
Property
=
"X2"
Value
=
"5"
/>
</
Style
>
<
Style
x:Key
=
"CustomLegendItemStyle"
TargetType
=
"telerik:ChartLegendItem"
>
<
Setter
Property
=
"Foreground"
Value
=
"Red"
/>
</
Style
>
</
Grid.Resources
>
<
telerik:RadChart
x:Name
=
"RadChart1"
/>
</
Grid
>
</
UserControl
>
C#
RadChart1.DefaultView.ChartArea.AxisXStyle =
this
.LayoutRoot.Resources[
"CustomAxisXStyle"
]
as
Style;
RadChart1.DefaultView.ChartArea.AxisYStyle =
this
.LayoutRoot.Resources[
"CustomAxisYStyle"
]
as
Style;
RadChart1.DefaultView.ChartArea.AxisX.AxisStyles.TickLineStyle =
this
.LayoutRoot.Resources[
"CustomTickLineXStyle"
]
as
Style;
RadChart1.DefaultView.ChartArea.AxisY.AxisStyles.TickLineStyle =
this
.LayoutRoot.Resources[
"CustomTickLineYStyle"
]
as
Style;
RadChart1.DefaultView.ChartArea.AxisY.AxisStyles.MinorTickLineStyle =
this
.LayoutRoot.Resources[
"CustomMinorTickLineYStyle"
]
as
Style;
RadChart1.DefaultView.ChartLegend.LegendItemStyle =
this
.LayoutRoot.Resources[
"CustomLegendItemStyle"
]
as
Style;
RadChart1.DefaultSeriesDefinition =
new
LineSeriesDefinition() { ShowItemLabels =
false
};
RadChart1.ItemsSource =
new
int
[] { 1, 5, 7, 2, 4 };
Greetings,
Freddie
the Telerik team

So far the code works perfectly for me.
But I also need to change the color of legend items and the chart
case 1 - Bar chart
I need to create 7 bar on the chart with different colors which should be stored in database
case 2 - Pie chart
I need to control the colors of various sections in the pie, and also the corresponding legends
Is there a way to do this?

Abhishek,
I'm not sure what version you are using but you will probably need to research the Model View- View Model (MVVM) method to accomplish what you need (unless they have greatly enhanced the newer version). With this method you can designate the colors you desire. I used this method in an example I sent to Telerik when I was having an issue with a horizontal stacked bar chart. The issue wasn't resolved but you can look at the MVVM example in the sample if you like:
http://www.telerik.com/community/forums/silverlight/chart/horizontal-stacked-bar-chart-tooltip-issue.aspx
The example also includes adding legend entries.

Hello Dennis
Thank you for your response.
I tried to analyse your code but it seems different from the one which I am implementing. I am not adding legenditems through code.
Following is my code
#region RadChart Queue Summary Methods
private
ObservableCollection<ChartDataObject> chartData =
new
ObservableCollection<ChartDataObject>();
public
ObservableCollection<ChartDataObject> ChartData
{
get
{
return
chartData;
}
set
{
chartData = value;
NotifyPropertyChanged(
"ChartData"
);
}
}
private
List<ISeriesDefinition> definitions =
new
List<ISeriesDefinition>(2);
private
void
AddChartSeries(ISeriesDefinition definition,
string
fieldName,
string
legendLabel)
{
definitions.Add(definition);
SeriesMapping s =
new
SeriesMapping();
s.SeriesDefinition = definition;
s.LegendLabel = legendLabel;
s.ItemMappings.Add(
new
ItemMapping(fieldName, DataPointMember.YValue));
RadChartQueueSummary.SeriesMappings.Add(s);
}
private
void
FillRadChartQueueSummaryChart(ObservableCollection<Queue> queues, ChartType chartType)
{
RadChartQueueSummary.SeriesMappings.Clear();
ChartData.Clear();
if
(chartType == ChartType.Bar)
{
BarSeriesDefinition def_Bar =
new
BarSeriesDefinition();
this
.AddChartSeries(def_Bar,
"Y1"
,
"Queue Count"
);
}
else
if
(chartType == ChartType.Pie)
{
PieSeriesDefinition def_Pie =
new
PieSeriesDefinition();
this
.AddChartSeries(def_Pie,
"Y1"
, String.Empty);
}
ObservableCollection<Queue> visibleQueues =
new
ObservableCollection<Queue>(); ;
foreach
(Queue q
in
queues)
if
(q.QueueCount != 0)
{
ChartData.Add(
new
ChartDataObject(q.QueueCount, q.QueueCount, q.QueueCount));
visibleQueues.Add(q);
}
foreach
(TickPoint tk
in
RadChartQueueSummary.DefaultView.ChartArea.AxisX.TickPoints)
{
tk.Label = visibleQueues[tk.CurrentIndex].QueueName;
}
if
(chartType == ChartType.Pie)
{
int
index = 0;
foreach
(DataPoint dp
in
RadChartQueueSummary.DefaultView.ChartArea.DataSeries[0])
{
dp.LegendLabel = visibleQueues[index].QueueName;
index = index + 1;
}
RadChartQueueSummary.DefaultView.ChartTitle.Content =
"Queue Count"
;
}
else
{
RadChartQueueSummary.DefaultView.ChartTitle.Content = String.Empty;
}
RadChartQueueSummary.DefaultView.ChartArea.AxisX.LabelRotationAngle = 45;
RadChartQueueSummary.DefaultView.ChartArea.Legend.Foreground =
new
SolidColorBrush(Colors.Black);
RadChartQueueSummary.DefaultView.ChartTitle.Foreground =
new
SolidColorBrush(Colors.Black);
RadChartQueueSummary.DefaultView.ChartArea.AxisXStyle =
this
.LayoutRoot.Resources[
"CustomAxisXStyle"
]
as
Style;
RadChartQueueSummary.DefaultView.ChartArea.AxisYStyle =
this
.LayoutRoot.Resources[
"CustomAxisYStyle"
]
as
Style;
RadChartQueueSummary.DefaultView.ChartArea.AxisX.AxisStyles.TickLineStyle =
this
.LayoutRoot.Resources[
"CustomTickLineXStyle"
]
as
Style;
RadChartQueueSummary.DefaultView.ChartArea.AxisY.AxisStyles.TickLineStyle =
this
.LayoutRoot.Resources[
"CustomTickLineYStyle"
]
as
Style;
RadChartQueueSummary.DefaultView.ChartArea.AxisY.AxisStyles.MinorTickLineStyle =
this
.LayoutRoot.Resources[
"CustomMinorTickLineYStyle"
]
as
Style;
RadChartQueueSummary.DefaultView.ChartLegend.LegendItemStyle =
this
.LayoutRoot.Resources[
"CustomLegendItemStyle"
]
as
Style;
}
#endregion
Queue is a object with QueueName and QueueCount properties.
ChartDataObject is a common class which I use in all my charts
using
System;
using
System.Collections.Generic;
using
System.Collections.ObjectModel;
namespace
Ceridian.HRO.WebUI.Common
{
public
class
ChartDataObject
{
private
double
_y1;
private
double
_y2;
private
double
_y3;
public
double
Y1
{
get
{
return
_y1;
}
set
{
_y1 = value;
}
}
public
double
Y2
{
get
{
return
_y2;
}
set
{
_y2 = value;
}
}
public
double
Y3
{
get
{
return
_y3;
}
set
{
_y3 = value;
}
}
public
ChartDataObject(
double
y1,
double
y2,
double
y3)
{
this
.Y1 = y1;
this
.Y2 = y2;
this
.Y3 = y3;
}
}
}
The XAML is below
<
customControls:CustomPage
Title
=
"Dashboard"
xmlns:navigation
=
"clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
xmlns:controls
=
"clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
x:Class
=
"Ceridian.HRO.WebUI.PRC.View.DashBoard.DashBoardView"
xmlns:mscorlib
=
"clr-namespace:System;assembly=mscorlib"
xmlns:customControls
=
"clr-namespace:Ceridian.HRO.WebUI.CustomControls;assembly=Ceridian.HRO.WebUI.CustomControls"
xmlns:controlsToolkit
=
"clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"
xmlns:telerikNavigation
=
"clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
xmlns:telerikCharting
=
"clr-namespace:Telerik.Windows.Controls.Charting;assembly=Telerik.Windows.Controls.Charting"
xmlns:telerikChart
=
"clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Charting"
xmlns:telerikGrid
=
"clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView"
xmlns:telerikGridView
=
"clr-namespace:Telerik.Windows.Controls.GridView;assembly=Telerik.Windows.Controls.GridView"
xmlns:telerik
=
"clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
xmlns:telerikData
=
"clr-namespace:Telerik.Windows.Data;assembly=Telerik.Windows.Data"
>
<
Grid
x:Name
=
"LayoutRoot"
VerticalAlignment
=
"Stretch"
HorizontalAlignment
=
"Stretch"
>
<
Grid.Resources
>
<
Style
x:Key
=
"CustomAxisXStyle"
TargetType
=
"telerikCharting:AxisX2D"
>
<
Setter
Property
=
"Foreground"
Value
=
"Black"
/>
<
Setter
Property
=
"AxisLineStyle"
>
<
Setter.Value
>
<
Style
TargetType
=
"Line"
>
<
Setter
Property
=
"Stroke"
Value
=
"Black"
/>
<
Setter
Property
=
"StrokeThickness"
Value
=
"1"
/>
</
Style
>
</
Setter.Value
>
</
Setter
>
</
Style
>
<
Style
x:Key
=
"CustomAxisYStyle"
TargetType
=
"telerikCharting:AxisY2D"
>
<
Setter
Property
=
"Foreground"
Value
=
"Black"
/>
<
Setter
Property
=
"AxisLineStyle"
>
<
Setter.Value
>
<
Style
TargetType
=
"Line"
>
<
Setter
Property
=
"Stroke"
Value
=
"Black"
/>
<
Setter
Property
=
"StrokeThickness"
Value
=
"1"
/>
</
Style
>
</
Setter.Value
>
</
Setter
>
</
Style
>
<
Style
x:Key
=
"CustomTickLineXStyle"
TargetType
=
"Line"
>
<
Setter
Property
=
"Stroke"
Value
=
"Black"
/>
<
Setter
Property
=
"StrokeThickness"
Value
=
"1"
/>
<
Setter
Property
=
"Y1"
Value
=
"0"
/>
<
Setter
Property
=
"Y2"
Value
=
"10"
/>
</
Style
>
<
Style
x:Key
=
"CustomTickLineYStyle"
TargetType
=
"Line"
>
<
Setter
Property
=
"Stroke"
Value
=
"Black"
/>
<
Setter
Property
=
"StrokeThickness"
Value
=
"1"
/>
<
Setter
Property
=
"X1"
Value
=
"0"
/>
<
Setter
Property
=
"X2"
Value
=
"10"
/>
</
Style
>
<
Style
x:Key
=
"CustomMinorTickLineYStyle"
TargetType
=
"Line"
>
<
Setter
Property
=
"Stroke"
Value
=
"Black"
/>
<
Setter
Property
=
"StrokeThickness"
Value
=
"1"
/>
<
Setter
Property
=
"X1"
Value
=
"0"
/>
<
Setter
Property
=
"X2"
Value
=
"5"
/>
</
Style
>
<
Style
x:Key
=
"CustomLegendItemStyle"
TargetType
=
"telerikCharting:ChartLegendItem"
>
<
Setter
Property
=
"Foreground"
Value
=
"Black"
/>
</
Style
>
</
Grid.Resources
>
<
telerikChart:RadChart
x:Name
=
"RadChartQueueSummary"
ItemsSource
=
"{Binding ChartData, Mode=OneWay}"
VerticalContentAlignment
=
"Stretch"
HorizontalAlignment
=
"Stretch"
VerticalAlignment
=
"Stretch"
Margin
=
"2,2,2,2"
Height
=
"400"
Background
=
"GhostWhite"
/>
</
Grid
>
</
customControls:CustomPage
>
Attached are the two charts.
I am using 2009.3.1208.1030 version
I want to control the colors of the bar and pie through my code instead of a random color generated by the framework.
Thank you!