Change RadChartView background color

10 posts, 0 answers
  1. Mathias
    Mathias avatar
    4 posts
    Member since:
    Apr 2013

    Posted 17 Apr 2015 Link to this post

    Hello,

    I'm desperately trying to change the color of the background of my chart (inside of the axis = plot area in Excel - see attached). I tried the background property for the area, the grid... I also tried to alternate the same color in my grid.

     How should I do that?

    Thanks,

    Mathias

  2. Ralitsa
    Admin
    Ralitsa avatar
    190 posts

    Posted 20 Apr 2015 Link to this post

    Hi Mathias,

    If you want to change the BackColor of the chart, you can use the following code snippet: 
    this.radChartView1.ChartElement.BackColor = Color.Aquamarine;

    If you want to change the BackColor of the area when the series are pained, please refer to the following code snippet: 
    CartesianArea area = this.radChartView2.GetArea<CartesianArea>();
    area.ShowGrid = true;
     
    CartesianGrid grid = area.GetGrid<CartesianGrid>();
    grid.DrawHorizontalFills = true;
    grid.DrawVerticalFills = true;           
    grid.DrawHorizontalStripes = false;
    grid.DrawVerticalStripes = false;
     
    area.Grid.BackColor = Color.Aquamarine;
    area.Grid.BackColor2 = Color.Aquamarine;
    area.Grid.AlternatingBackColor = Color.Aquamarine;
    area.Grid.AlternatingBackColor2 = Color.Aquamarine;

    In the attachments you can find the image and the sample demo project how to achieved it. 

    Should you have further questions, I would be glad to help. 

    Regards,
    Ralitsa
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  3. Mathias
    Mathias avatar
    4 posts
    Member since:
    Apr 2013

    Posted 20 Apr 2015 in reply to Ralitsa Link to this post

    Thanks Ralitsa,

    it's working fine now!

    Best,

    Mathias

  4. Alexander
    Alexander avatar
    4 posts
    Member since:
    Jun 2014

    Posted 24 Nov 2015 Link to this post

    A question regarding this, is it possible to do the opposite (i.e paint only the area outside of the area where the series are being painted)?

     

  5. Ralitsa
    Admin
    Ralitsa avatar
    190 posts

    Posted 25 Nov 2015 Link to this post

    Hi Alexander,

    Thank you for contacting us. 

    Yes, you can change that BackColor of area. Please refer to the code snippet below how to achieve it: 
    this.radChartView1.ChartElement.BackColor = Color.Aquamarine;
     
    CartesianArea area1 = this.radChartView1.GetArea<CartesianArea>();
    area1.ShowGrid = true;
     
    CartesianGrid grid1 = area1.GetGrid<CartesianGrid>();
    grid1.DrawHorizontalFills = true;
    grid1.DrawVerticalFills = true;
    grid1.DrawHorizontalStripes = false;
    grid1.DrawVerticalStripes = false;
     
    area1.Grid.BackColor = Color.White;
    area1.Grid.BackColor2 = Color.White;
    area1.Grid.AlternatingBackColor = Color.White;
    area1.Grid.AlternatingBackColor2 = Color.White;

    In the attachments you can find an image demonstrating the appearance of RadChartVeiw. 

    Hope this will help you. Let me know if you have any other questions.

    Regards,
    Ralitsa
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
  6. Rahul
    Rahul avatar
    3 posts
    Member since:
    Jan 2014

    Posted 18 Jul 2019 Link to this post

    i am using radchartview and i am using areaseries to plot areachart in windows form.i need to add opacity to the plot area chart , i searched a lot but not able to find it, can you please help me on this. Please find the image attached.

     

    Below is the code i am using.

     

                List<AreaSeries> _areaseries = new List<AreaSeries>();

                foreach (DataRow row in table.Rows)
                {
                    AreaSeries areaseries = new AreaSeries();

                    foreach (DataColumn column in table.Columns)
                    {
                        if (!_allowedcolumns.Contains(column.ColumnName))
                        {
                            areaseries.DataPoints.Add(new CategoricalDataPoint(Convert.ToDouble(row[column]), column.ColumnName.Replace("h", "").Trim()));
                        }
                    }

                    areaseries.LegendTitle = Convert.ToString(row["Week"]);
                    _areaseries.Add(areaseries);

                }

                foreach (AreaSeries series in _areaseries)
                {
                    //series.ShowLabels = true;
                    if (series.LegendTitle == "This Week")
                        series.ImageOpacity = 30;

                    this.radChartView1.Series.Add(series);
                }



                this.radChartView1.ShowTitle = true;
                this.radChartView1.ShowLegend = true;



                this.radChartView1.ShowGrid = true;
                this.radChartView1.Title = "CUSTOMERS PER DAY vs CUSTOMERS PER DAY LAST WEEK";
                this.radChartView1.ChartElement.TitleElement.Font = new Font("Arial", 8, FontStyle.Regular);
                this.radChartView1.ChartElement.TitlePosition = TitlePosition.Bottom;
                this.radChartView1.ChartElement.TitleElement.TextAlignment = ContentAlignment.TopCenter;
                this.radChartView1.Area.View.Palette = KnownPalette.Metro;
                //this.radChartView1.Axes[0].Title = "TIME OF DAY";
                //this.radChartView1.Axes[1].Title = "NUMBER OF CUSTOMERS PER HOUR";

     

  7. Rahul
    Rahul avatar
    3 posts
    Member since:
    Jan 2014

    Posted 18 Jul 2019 in reply to Rahul Link to this post

    something this below link but dynamically,

    https://docs.telerik.com/devtools/winforms/controls/chart/how-to/how-do-i-make-colors-display-with-partial-transparency#how-do-i-make-colors-display-with-partial-transparency

  8. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3713 posts

    Posted 23 Jul 2019 Link to this post

    Hello, Rahul, 

    The referred link is relevant to RadChart which has been obsolete for years and replaced by RadChartView

    If you need to make the series transparent with a specific opacity, you can iterate the RadChartView.Series collection after the palette is applied and specify the alpha for each color in order to obtain a semi-transparent color. Please refer to the following code snippet:

    foreach (AreaSeries s in this.radChartView1.Series)
     {
         s.BackColor = Color.FromArgb(125, s.BackColor.R, s.BackColor.G, s.BackColor.B);
     }


     
    I hope this information helps. If you need any further assistance please don't hesitate to contact me. 

    Regards,
    Dess | Tech Support Engineer, Sr.
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  9. Rahul
    Rahul avatar
    3 posts
    Member since:
    Jan 2014

    Posted 26 Jul 2019 in reply to Dess | Tech Support Engineer, Sr. Link to this post

    i have to do that very day, so i got some concept of custom pallete and i used it like this, as many series i have i assigned that much of pallete like shown below and after that i assigned the pallete to the chart like shown in attached file . Please let me know if this approach works if the series increases.

     

    public class CustomPalette : ChartPalette
    {
        public CustomPalette()
        {
            this.GlobalEntries.Add(Color.FromArgb(80, 33, 92, 122), Color.FromArgb(33, 92, 122));
            this.GlobalEntries.Add(Color.FromArgb(75, 191, 217, 122), Color.FromArgb(191, 217, 122));
        }
    }

  10. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3713 posts

    Posted 29 Jul 2019 Link to this post

    Hello, Rahul,   

    Creating a custom palette and adding a collection of palette entries seems to be a suitable solution for your case. The following help article also demonstrates how to add a custom palette: https://docs.telerik.com/devtools/winforms/controls/chartview/customization/palettes

    Thus, you can add as many colors as series you have in RadChartView.

    Should you have further questions please let me know.

    Regards,
    Dess | Tech Support Engineer, Sr.
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top