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

Change of chart fontcolor

11 Answers 179 Views
Chart
This is a migrated thread and some comments may be shown as answers.
Kiran Ghanwat
Top achievements
Rank 1
Kiran Ghanwat asked on 06 Apr 2010, 10:37 AM
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.....

11 Answers, 1 is accepted

Sort by
0
Giuseppe
Telerik team
answered on 06 Apr 2010, 11:11 AM
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.
0
Kiran Ghanwat
Top achievements
Rank 1
answered on 06 Apr 2010, 11:20 AM
Hey Freddie ,
Thanks for your valuable response.
I am using 2009.3.1314.1030 version of charting.
These properties giving me errors.
0
Accepted
Giuseppe
Telerik team
answered on 08 Apr 2010, 11:16 AM
Hello Kiran,

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

XAML:
<UserControl x:Class="SilverlightApplication1.MainPage"
    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.
0
Dennis
Top achievements
Rank 1
answered on 29 Jul 2010, 07:45 PM
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.
0
Sia
Telerik team
answered on 03 Aug 2010, 01:16 PM
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
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
0
Dennis
Top achievements
Rank 1
answered on 03 Aug 2010, 10:51 PM
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">
...
0
Abhishek Gairola
Top achievements
Rank 1
answered on 10 Aug 2010, 10:31 AM
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!
0
Giuseppe
Telerik team
answered on 10 Aug 2010, 03:58 PM
Hello Abhishek,

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

XAML
<UserControl x:Class="SilverlightApplication1.MainPage"
    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
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
0
Abhishek Gairola
Top achievements
Rank 1
answered on 10 Aug 2010, 04:53 PM
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?
0
Dennis
Top achievements
Rank 1
answered on 10 Aug 2010, 06:51 PM

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.

0
Abhishek Gairola
Top achievements
Rank 1
answered on 11 Aug 2010, 09:36 AM

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!
Tags
Chart
Asked by
Kiran Ghanwat
Top achievements
Rank 1
Answers by
Giuseppe
Telerik team
Kiran Ghanwat
Top achievements
Rank 1
Dennis
Top achievements
Rank 1
Sia
Telerik team
Abhishek Gairola
Top achievements
Rank 1
Share this question
or