Change of chart fontcolor

[Kiran Ghanwat]

Hello community ,

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.....

[Giuseppe]

Hi Kiran,

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.

[Kiran Ghanwat]

Hey Freddie ,
Thanks for your valuable response.
I am using 2009.3.1314.1030 version of charting.
These properties giving me errors.

[Giuseppe]

Hello Kiran,

You can achieve the desired effect like this with the old version of the control:

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"
    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.

[Dennis]

I need to know how to set the axis text font color for a chart in 2009.3.1314.1030 version also, but I need to change it in the theme (chart.xaml), not in the actual xaml or xaml.cs.  I already have a custom theme set up (and it works) but I don't know where I can change this specific setting.  I need the axis text (X & Y axis) to be black (its currently gray in the theme I'm using which is a modified Summer theme). 
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.

[Sia]

Hello Dennis,

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

[Dennis]

Thank you Sia for your response but I have figured it out through trial and error.  I had to include the following in my Chart.xaml file: 

...
<SolidColorBrush x:Key="AxisLabel2DForeground" Color="#FF000000"/>
...

And then in the AxisLabel2D area I had to reference that:

...
   <Style

        TargetType="telerikCharting:AxisLabel2D" >
        <Setter Property="Foreground"
                Value="{StaticResource AxisLabel2DForeground}" />
        <Setter Property="Template" >
            <Setter.Value>
                <ControlTemplate TargetType="telerikCharting:AxisLabel2D">
...

[Abhishek Gairola]

How to change the color of the axis x line and axis y line?
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!

[Giuseppe]

Hello Abhishek,

You can achieve the desired effect for older versions of the control like this:

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"
    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

[Abhishek Gairola]

Thank you very much Freddie,

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?

[Dennis]

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.

[Abhishek Gairola]

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="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    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!