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

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.

Download ComponentOne Studio

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.

Customize Chart Axis: Format, Plot, Scale, and More
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 Chart Axis: Format, Plot, Scale, and More
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;

Customize Chart Axis: Format, Plot, Scale, and More
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.

Customize Chart Axis: Format, Plot, Scale, and More
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.

Customize Chart Axis: Format, Plot, Scale, and More
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;

Customize Chart Axis: Format, Plot, Scale, and More
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;

Customize Chart Axis: Format, Plot, Scale, and More
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/DateTime 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";

Customize Chart Axis: Format, Plot, Scale, and More
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;

Customize Chart Axis: Format, Plot, Scale, and More
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;

Customize Chart Axis: Format, Plot, Scale, and More
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.

Customize Chart Axis: Format, Plot, Scale, and More
Displaying Multiple Y Axis

Sample Links