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.
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 axis lines
- Display axis titles
- Manage overlapped axis labels
- Format axis labels
- Configure tick marks, gridlines and intervals
- Change the axis scale
- Plot multiple axis
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.
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;
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;
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.
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.
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;
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;
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";
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;
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;
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.