Backgrounds, Titles, Rounded Corners

Excel Chart Project: For C# and VB NET Students


We'll finish off the chart format in this lesson. Let's start with the chart's background color. We'll add a gradient.

In Design View, click on your chart to select it. In the Properties area on the right of Visual Studio, locate the ChartAreas item. Then click the button to the right of Collection:

Properties panel in Visual Studio showing the ChartAreas item selected

This will bring up the ChartAreas Collection Editor. To get a gradient, first select two colors: BackColor and BackSecondaryColor:

The ChartAreas Collection Editor with the BackColor and BackSecondaryColor items highlighted

Once you have your two colors (you need to do them separately), click on BackGradientStyle:

The BackGradientStyle property highlighted with the TopBottom value selected

Select a gradient from the list. We've chosen TopBottom.

(If you prefer, you can select an image instead of gradient. This is done via the BackImage property, two down from the BackGradientStyle item above.)

Click OK on the ChartArea Collection Area box and your chart will look something like this:

A chart with a background gradient in C# and VB Net

To change the background color of the entire chart, the white areas, make sure your chart is selected. In the Properties area, locate the BackColor property:

Setting the BackColor property of a chart

Change it to any colour you like.

If you want to set a solid border around the whole of your chart, change the BorderlineDashStyle property to Solid, the BorderlineWidth to 2 (or any value you like), and set a BorderlineColor:

Setting the BorderlineDashStyle property of a chart

Chart Titles

To add a title to the top of your chart, scroll down in the properties area and locate the Titles collection:

Setting a Title for a chart

Click the button to bring up the Titles Collection Editor. Click the Add button to add a new title:

The Titles Collection Editor in Visual Studio

In the Title1 Properties area for your new title, locate the Text property at the top. Type Sales Figures:

The Titles Collection Editor with a Title set

Now scroll down and locate the Font property. Change it any font style you like. Click OK on the Titles Collection Editor to return to Design View. Run your program and your chart will look something like this:

A chart in C# and VB Net with a title at the top

If you want to add a title at the bottom, for the X Axis, it's done through the ChartAreas Property again. Bring up the ChartAreas Collection Editor like you did before. Locate the Axes property:

The ChartAreas Collection Editor with the Axes item highlighted

This is another Collection, so you have to click the Collection button. In the Axis Collection Editor, make sure the X Axis is selected under Members on the left. Then locate the Title property. Enter Months as the text:

The Axis Collection Editor showing how to set a title at the bottom of a chart

You can set a TitleFont, as well.

Click OK when you're done to get back to the ChartAreas Collection Editor. Click OK on this to set the title at the bottom.


Rounded Corners for your Chart

You can set your chart to have rounded corners.

With your chart selected, locate the BorderSkin property in the Properties area on the right. Expand BorderSkin to see some options. Click the down-arrow for SkinStyle to see the different skins you can apply to a chart:

The BorderSkin property with the SkinStyle set to a value of Emboss to get rounded corners on a chart

Select Emboss to get rounded corners.

One thing to notice here is the white background behind the chart, especially where the rounded corners are. To get rid of this, you can set this white background to be transparent. The property you need is PageColor, under the BorderSkin options:

Setting the PageColor property to a value of Transparent

Click the down-arrow of PageColor and select Transparent.

Your chart will look something like this, when you run the program:

A chart on a Visual Studio form with rounded corners

Series Formatting

If you don't like the white background for the Series on the right, you can change it. This is done through the Legends property.

With your chart selected, locate the Legends property:

The Legends property of a Visual Studio chart

Again, this is a collection. Click the Collection button to bring up the Legends Collection Editor:

The Legends Collection Editor

A default Legend of Legend1 has already been added. Each Legend has its own properties. So locate the Font property and change it to bold. Locate the BackColor property and select a new colour to replace the white one. Locate the BorderColor property and change it to anything you like.

Click OK on the Legends Collection Editor when you've made the above changes.

Run your program and here's the finished chart (we've changed the BackColor property of the form itself from the default grey):

The completed chart to grab Excel data using C# and VB Net

And that's it for this Chart project. Hope you enjoyed it!

Back to the C# NET Contents Page

Back to the VB NET Contents Page