Today we’ll learn about a basic, yet important, chart element: Axis, the horizontal and vertical lines bordering the plot area. Most charts have 2 axes: a horizontal X-axis to categorize data, and a vertical Y-axis to measure data.

Update(2016 v2): FlexChart now supports Axis Title styling.

Try ComponentOne's FlexChart control

Download the latest version of ComponentOne Studio Enterprise

Download Now!

FlexChart’s API supports effortless property configuration of chart axis display, position, labels, and bounds, and also supports reverse axis, tick marks, and gridlines. You can also add as many secondary X and Y axes to the chart as you need. In this blog post, we’ll cover:

Display or hide chart axis lines

Keeping up with the latest visualization trends, FlexChart displays only the horizontal axis line and the vertical axis line is hidden by default.

Default visibility of FlexChart Axis

This default behaviour can be changed by setting the AxisLine property of respective axis to true/false as required. Following snippet makes the y-axis visible in FlexChart.

flexChart.AxisY.AxisLine = true;

Customize FlexChart axis visibility

Display Axis Titles To make it clearer what values an axis is representing, all chart axes should be identified by an axis title that ideally should mention the data being displayed in the axis. In FlexChart this can be done by setting the Title property of the Axis. You can also customize the axis title's Font and Color using the TitleStyle property of the axis.

flexChart.AxisX.Title = "Day of Week";  
flexChart.AxisX.TitleStyle.StrokeColor = Color.Blue;  
flexChart.AxisY.Title = "Amount - In Dollars";  
flexChart.AxisY.TitleStyle.StrokeColor = Color.Blue;

Displaying Axis Titles

Manage Overlapped Axis Labels Chart uses text from its source data to display axis labels below the horizontal axis and next to vertical axis. While designing charts, a very common problem that we all come across is overlapping of axis labels as you can see in the following figure. This usually happens when the number of data points are large or category names are pretty long.

OverlappingLabels = Show

FlexChart helps resolve this by providing Axis.OverlappingLabels property, letting you manage the display of overlapped axis labels. When set to Auto, its default value, FlexChart will hide all the labels on the axis that are overlapped.

OverlappingLabels = Auto

Yet, this alone may not suffice and some of you may have the following requirement: _“I don’t want overlapped labels in my chart and I don’t want to hide any of the axis labels.” _ FlexChart handle this requirement of yours by auto-detecting if there is any chance of label overlapping or not based on the space availability. In case there is enough available space, it will display all the labels in regular manner and if not, it will auto rotate the axis labels to display them tilted. All you need to do is to set the LabelAngle property of Axis class to Double.NaN.

flexChart.AxisX.LabelAngle = Double.NaN;

LabelAngle = Double.NaN

You can also customize the display orientation of label by setting the LabelAngle to any angle of your choice. For example,

flexChart.AxisX.LabelAngle = -90;

Customized LabelAngle

Format Axis Labels You can present the axis labels in a variety of formats, including displaying short or long dates, display currency symbols, percentages very easily. This can be done by specifying a .NET standard or custom Numeric.aspx)/DateTime.aspx) format strings in Format property of the axis. Following snippet demonstrates an example for the same.

flexChart.AxisX.Format = "dd-MMM-yyyy";  
flexChart.AxisY.Format = "C0";

Formatting Axis labels

Configure TickMarks, GridLines and Intervals

FlexChart lets you configure the smallest of elements of an axis with its rich set of API. You can not only toggle the visibilities of the tick marks and grid lines, but also change the interval at which they are drawn in the chart. Some of the important properties available for them are:

flexChart.AxisY.MinorTickMarks = TickMark.Outside;  
flexChart.AxisY.MajorTickMarks = TickMark.Outside;  
flexChart.AxisY.MajorUnit = 5000;  
flexChart.AxisY.MinorUnit = 1000;  
flexChart.AxisY.MajorGridStyle.StrokeColor = Color.Red;  

Customizing TickMarks, Gridlines and Intervals in FlexChart

For a complete list of axis configuration options, you can refer here. In the sections above, we saw how FlexChart's Axis meets your different basic data plotting needs. Now, let's take a look at some other built-in feature set offered by Axis class for your advanced data plotting needs.

Change the Axis Scale

When you create a chart using FlexChart, it by default uses a linear scale to plot values and determines the minimum and maximum scale values of the vertical axis. You can also customize the scale to better meet your needs by setting the Min and Max properties respectively. When the data is spread over a large range then you can switch to a logarithmic scale (also known as log scale) by setting the LogBase property of the axis. Following shows a linear plot converted to a semi-log plot by changing the y-axis LogBase.

flexChart.AxisY.LogBase = 10;

Using Logarithmic scale in FlexChart

Plot Multiple Axis

While working with charts, it is often required to plot data in different scales, mixed types of data and sometimes combine different chart types into a single chart. With FlexChart, you can easily meet these requirements by plotting one or more data series on a secondary axis. You can have multiple axis in FlexChart by adding as many secondary X and Y axes to the chart as you need. In order to plot a series on the secondary axes, you can specify its AxisX and AxisY properties to a new Axis object. The following diagrams depicts plotting of two or more secondary axes on FlexChart.

Displaying Multiple Y Axis

Try ComponentOne's FlexChart control

Download the latest version of ComponentOne Studio Enterprise

Download Now!