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

Change RadChartView background color

9 Answers 476 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
Mathias
Top achievements
Rank 1
Mathias asked on 17 Apr 2015, 06:32 PM

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

9 Answers, 1 is accepted

Sort by
0
Ralitsa
Telerik team
answered on 20 Apr 2015, 08:55 AM
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.

 
0
Mathias
Top achievements
Rank 1
answered on 20 Apr 2015, 10:12 AM

Thanks Ralitsa,

it's working fine now!

Best,

Mathias

0
Alexander
Top achievements
Rank 1
answered on 24 Nov 2015, 02:44 PM

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)?

 

0
Ralitsa
Telerik team
answered on 25 Nov 2015, 10:33 AM
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
0
Rahul
Top achievements
Rank 1
answered on 18 Jul 2019, 08:26 PM

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

 

0
Rahul
Top achievements
Rank 1
answered on 18 Jul 2019, 08:29 PM

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

0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 23 Jul 2019, 08:36 AM
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.
0
Rahul
Top achievements
Rank 1
answered on 26 Jul 2019, 02:55 PM

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));
    }
}

0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 29 Jul 2019, 10:52 AM
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.
Tags
ChartView
Asked by
Mathias
Top achievements
Rank 1
Answers by
Ralitsa
Telerik team
Mathias
Top achievements
Rank 1
Alexander
Top achievements
Rank 1
Rahul
Top achievements
Rank 1
Dess | Tech Support Engineer, Principal
Telerik team
Share this question
or