The X Axis

Excel Chart Project: For C# and VB NET Students

 

In the previous lesson, we have an X Axis on our chart that looked like this:

A chart's X Axis

You can see from the chart, though, that it just has numbers on the bottom, the X Axis. What we'll do instead is to put the months of the year at the bottom, instead of 0 to 12.

In order to access a chart axis, you need to add a new reference to the top of your code. It's quite a long one. Add this in C#:

using System.Windows.Forms.DataVisualization.Charting;

And this in VB Net:

Imports System.Windows.Forms.DataVisualization.Charting

The Charting namespace has a Class called Axis that we can use. You can get a reference to an Axis on your charts with this using/Imports statement.

First, though, set up a string array to hold the months of the year. Add this line to your button code in C#, just below your DataBindY line:

string[] months = new string[12] {"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" };

And this in VB:

Dim months() As String = {"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"}

Now set up an Axis object with this in C#:

Axis axisX = chartSales.ChartAreas[0].AxisX;

And this in VB Net:

Dim axisX As Axis = chartSales.ChartAreas(0).AxisX

We're going to add some custom labels. We get a reference to the chart area X Axis with ChartAreas(0).AxisX (square brackets for C#). This now becomes an Axis object with the name axisX.

We need to position the month labels at the bottom. So, just after the Axis line, set up this variable in C#:

double axisLabelPos = 0.5;

And this one in VB:

Dim axisLabelPos as Double = 0.5

Now we need another loop. We'll loop round and create a custom label for each month.

Add this for loop in C#:

for (int i = 0; i < months.Length; i++)
{
}

And this one in VB Net:

For i = 0 To months.Length - 1

Next i

As the fist line of the loop, add this in C#:

axisX.CustomLabels.Add(axisLabelPos, axisLabelPos + 1, months[i]);

And here's the line to add in VB:

axisX.CustomLabels.Add(axisLabelPos, axisLabelPos + 1, months(i))

The Add Function/method has lots of overloads you can use. We're using the one that takes three arguments. The first two are for fromPosition and toPosition. This is used to position the month in the correct place. The third parameter is our array of months.

So that we can position each month correctly, we need to increment the axisLabelPos variable. Add this as the final line of the loop:

C#

axisLabelPos = axisLabelPos + 1.0;

VB

axisLabelPos = axisLabelPos + 1.0

This just add 1 to axisLabelPos. If we didn't do this the months would all be on top of each other.

The code for your button should look like this in C#:

C# code to add Custom Labels to the X axis of a chart

And this in VB:

C# code to add Custom Labels to the X axis of a chart

Run you program. Select a member of staff from the dropdown list. Load a chart up by clicking your button. You should see the months at the bottom of the chart:

Months added to the X Axis of a chart

You can have the months vertically instead of horizontally. Add this line just below your button's for loop:

C#

chartSales.ChartAreas[0].AxisX.LabelStyle.Angle = 90;

VB

chartSales.ChartAreas(0).AxisX.LabelStyle.Angle = 90

So you just set the AxisX.LabelStyle.Angle property of the Chart Area. We're setting it to a value of 90. Your chart will then look like this:

Chart using the Angle property to turn the labels 90 degrees

If you notice the vertical lines, however, you'll see that there are none for the months Jan, Mar, May, Jul, Sep and Nov. We can fix that.

Add this line in C#, just below your Angle one:

chartSales.ChartAreas[0].AxisX.MajorGrid.Interval = 1;

And this in VB:

chartSales.ChartAreas(0).AxisX.MajorGrid.Interval = 1

Now we need AxisX.MajorGrid of the Chart Area. This has an Interval property. Set this to 1 to get the lines for all the months. Your chart will then look like this:

Changing the Interval property of a chart

And that's it for the coding. We're all done! However, the chart is looking a bit bland. What we'll do next is to add some formatting to the chart. We're going to turn it into this:

A formatted chart

To start the formatting lesson, click below.

Format the Chart Lines >>

Back to the C# NET Contents Page

Back to the VB NET Contents Page