Customizing the FlexChart Axis Labels

In this post I will rundown the full range of ways to customize FlexChart axis labels from simple formatting to a complete replacement. I will start with the most basic approach and work up to the most custom. Why customize the axis labels? Well, if you’ve stumbled upon this blog post then you already know why you need to. If you’re casually reading this then let me show you a compelling reason to customize the FlexChart axis labels. FlexChart is designed to be a reusable, off-the-shelf control so the default behavior is designed to be general, and it’s intended to be modified to fit specific requirements. For instance, the Y axis labels show numeric values with no formatting by default. There are several common ways you may want to customize the labels on both the X and Y axes. For instance, you may want the numeric values to be formatted like “$16,000.00” or “$16K”. You may also want to change the layout or color of the text, or replace it completely with an image. When working with mobile UI’s we often have limited screen real-estate so some of these changes can help reduce the text-clutter in our visualization. FlexChart supports several different techniques for customizing the axis labels. Let’s look at each possible scenario.

Using Format Strings

The simplest way to customize the axis labels is to set the format string. FlexChart supports standard .NET format strings such as currency (C), percent (P) and numeric (N). For example, we can change the format to display as currency with 2 places past the decimal with a format string “C2”.

Rotating the Labels

If you are facing an issue where the labels are too long and overlap, you can rotate them by just setting the LabelAngle property.

Removing the Labels

A drastic way to customize the labels is to hide them completely. You can do this by setting the LabelsVisibleProperty. For example, we can hide the Y axis labels (as well as the line itself) like this.

Changing the Frequency of Labels

You’ll find this more necessary on larger tablets, but sometimes you may want to reduce the frequency of axis labels. You can control the amount of labels being created by setting the MajorUnit property.

Customizing the Label Color

To customize the color for all labels you can set the LabelTextColor property. If you want to conditionally color the labels you can do this within the LabelLoading event. For example, this code modifies the color to be red or green depending on the value.

Customizing the Label Text

Just like how we changed the label text color, we can very easily modify the text at the same time. This would allow a custom format that can’t be handled by a .NET format string alone, such as converting “16,000” to “16K”.

Customizing the Label Completely

If you notice in the LabelLoading event arguments you set the e.Label property to set your custom label. The e.Label parameter is of type View, which means you can make it anything! For example, this code displays an image in place of the labels. This code snippet references a flag converter class that converts “USA” to a flag image embedded with the project. For the complete source for this sample, you will find it included with the FlexChart101 samples on GitHub. Look for the Customizing Axes sample.