Often, in your chart data, you might have long data labels (category names). Fitting them on a small chart space often becomes cumbersome, as they make the chart look cluttered. FusionCharts XT offers a myriad of options to help you gain control over long or too many x-axis/data labels. Here, we have explained a few such methods including:

• Auto mode (Default mode) - chart automatically selects the best mode of display (between rotate and wrap)
• Using wrap mode
• Using rotated and slanted mode
• Using staggered mode and setting staggered lines
• Showing every n-th label
• Displaying short label on axis and showing full name as ToolTip
• Additional label management method applied to all Line and Area charts

Now, let us us take a detailed look at each of them.

In AUTO mode the chart automatically chooses the most appropriate layout for data labels - depending on the availability of space. So, if the number of data labels is greater than what can be accommodated in the available space, then the data labels are either truncated (with ellipses to indicate truncation), wrapped or rotated. ToolTips showing full data label appears when the user hovers over a truncated data label, as shown under. The AUTO mode is active by default, and can be disabled by switching to an alternative label display mode.

The WRAP mode enables you to wrap the long x-axis or data labels of your chart in multiple lines, as shown below. To enable WRAP mode, all you need to do is set :

<chart labelDisplay='WRAP'>

 "chart":{
    "labeldisplay":"WRAP"
  }

You can opt to rotate the x-axis or data labels by using <chart labelDisplay='Rotate' ...>.

Consider the XML below:

It gives us the following chart:

You can also slant the labels at 45 degrees by using <chart labelDisplay='Rotate' slantLabels='1' ...> which gives the following visual output:

Note: In case of Scatter and Bubble charts, when the attribute xAxisLabelMode is set to auto slanting of the x-axis labels is not applicable.

FusionCharts XT allows you to set the stagger mode for labels. Staggering basically distributes labels into multiple lines (by default 2). To enable stagger mode, just set <chart labelDisplay='Stagger' ...>. It will yield the following:

You can also choose how many lines to stagger the labels to by setting the number in <chart labelDisplay='Stagger' staggerLines='n' ...> where n is the number of lines. Shown below is an example with staggerLines set to 3.

If your x-axis or data labels represent a continuous quantity like time, date etc. which are incremental in nature, you can opt to show every n-th label instead of all the labels. This enhances the visual clarity of the chart. Consider the XML below:

In the above chart, we are plotting consecutive months on the chart. So, if we show all the months, the x-axis or data labels of the chart could get cluttered. To avoid this, we have set labelStep as 4, so that every 4th x-axis label is only shown.

When you view the chart, you will get following output:

If you are working on a small chart size, you can also opt to show abbreviated names on x-axis, but show full names as ToolTip. Consider the XML below:

In the above XML, we are showing only the first character of each month name on x-axis. The rest of information is shown as ToolTip as below:

In this section, we have just given you a brief idea of your control over the x-axis or data labels. You may mix and match these ideas to effectively get much better control over the x-axis or data labels.

Starting FusionCharts XT, all Line and Area charts apply an additional label management method to render x-axis labels.

All the Line and Area charts automatically adjust the canvas padding (the space between the canvas border and the position where the Line or Area chart begins and ends) to accommodate long labels. This ensures that the first and last x-axis labels are not rendered outside the canvas border and the labels never overlap each other. A line and an Area chart where the canvas padding gets automatically calculated and applied due to long labels look as under: