How to set background color for Infragistics Charts

When you are creating visual representation of data using Charts, you want to make sure that your presentation is not just simple drawing of lines or columns here and there. For a number cruncher that may be what he is really interested in, but when the presentation is appealing, it leaves a good impact on the person who is looking at it and draws their attention to actual data behind it as well.

One thing that plays big part in face lift of a chart is background of each segment of the chart. And two segments that play a huge part are over all background of whole chart and background of area that repesent rendering of data points. Infragistics Chart control provides lots of ways you can control these background parameters. Lets see them one at a time. Following screen shot shows a column chart that has distinct background colors for two sections that I just mentioned.

How to set background color for Chart?

There is no direct property that allows you to set color properties for over all chart. Infragistics provides a way to attach an image to background that you can use to fill the entire area of chart. Here is an example from their online samples.

this.UltraChart1.BackgroundImageFileName=Server.MapPath("../images/StretchedFit.png");

This approach would mean that I need to be able to create images that will work as per my requirements. Well if you do not have ability to work with graphics tools then you are out of luck. Here is an approach that does not require background image.

Use FillScreneGraph event to insert a custom box that draws on the complete chart area. The dimensions of this box are same the size of your chart object. So there is no much of math required. And then set the fill and color attributes on that Box primitive to match your requirements. There is little caveat to this approach. It seems that this being a custom object, it gets drawn after other layers have been rendered. So you have to play a little bit with FillOpacity paremeters to make sure that your custom box does not end up hiding your chart. Here is some code that I used for demo chart.

void InsertChartBackground(Infragistics.UltraChart.Shared.Events.FillSceneGraphEventArgs e)
{
    Box bgBox = new Box(new Point(0, 0), 
                       (int)StockPriceChart.Width.Value, 
                       (int)StockPriceChart.Height.Value);
    bgBox.Roundness = 20;
    bgBox.PE.ElementType = PaintElementType.Gradient;
    bgBox.PE.Fill = Color.LightGray;
    bgBox.PE.FillStopColor = Color.Blue;
    bgBox.PE.FillGradientStyle = GradientStyle.ForwardDiagonal;
    bgBox.PE.StrokeWidth = 0;
    bgBox.PE.StrokeOpacity = 0;
    bgBox.PE.FillStopOpacity = 25;
    bgBox.PE.FillOpacity = 25;
    e.SceneGraph.Add(bgBox);
}

Another important parmeter is roundness of custom box. If you have set rounded corner for border of your chart, then make sure that you use the same parameters for this box as well. Otherwise your background box will have edges bleeding through chart border.

How to set background of chart area?

This one is pretty straight forward. Infrgistics provides you place to do it on axis object itself. Here is sample code.

void SetChartAreaBackground()
{
   StockPriceChart.Axis.PE.ElementType = PaintElementType.Gradient;
   StockPriceChart.Axis.PE.FillGradientStyle = GradientStyle.ForwardDiagonal;
   StockPriceChart.Axis.PE.Fill = Color.FromArgb(255, 225, 253, 248);
   StockPriceChart.Axis.PE.FillStopColor = Color.FromArgb(255, 245, 255, 253);
   StockPriceChart.Axis.PE.FillOpacity = 100;
   StockPriceChart.Axis.PE.StrokeOpacity = 0;
   StockPriceChart.Axis.PE.StrokeWidth = 0;
}