Change RadChartView background color

[Mathias]

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

[Ralitsa]

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

 

 

[Mathias]

Thanks Ralitsa,

it's working fine now!

Best,

Mathias

[Alexander]

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

 

[Ralitsa]

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

[Rahul]

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

 

[Rahul]

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

[Dess | Tech Support Engineer, Principal]

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

[Rahul]

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

[Dess | Tech Support Engineer, Principal]

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