Often, in your chart data, you might have long x-axis names (category names). Fitting them on a small chart space becomes a little cumbersome, as they make the chart look too cluttered. FusionCharts v3 offers a myriad of options to help you gain control over long/too many x-axis labels. Here, we've 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 tool tip

How do I use the Auto Mode to handle long x-axis labels?

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.

How do I use the Wrap Mode to handle long x-axis labels?

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

<chart labelDisplay='WRAP'>

How do I use the Rotated and Slanted Mode to handle long x-axis labels?

You can opt to rotate the x-axis labels by using 

<chart labelDisplay='Rotate' ..>

Consider the XML below:

<chart numberPrefix='$' labelDisplay='ROTATE'>
   <set label='Jan 2006' value='434' />
   <set label='Feb 2006' value='376' />
   <set label='Mar 2006' value='343' />
   <set label='Apr 2006' value='234' />
   <set label='May 2006' value='356' />
</chart>

It yields the following chart:

You can also slant the labels at 45 degree by using <chart labelDisplay='Rotate' slantLabels='1' ..> with the following results:

How do I use the Staggered Mode to handle long x-axis labels?

FusionCharts v3 introduces 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.

How do I use the 'showing every n-th label' property to handle long x-axis labels?

If your x-axis 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 clarity of the chart. Consider the XML below:

<chart numberPrefix='$' labelStep='4' showValues='0'>
    <set label='Jan 2006' value='434' />
    <set label='Feb 2006' value='376' />
    <set label='Mar 2006' value='343' />
    <set label='Apr 2006' value='234' />
    <set label='May 2006' value='356' />
    <set label='Jun 2006' value='183' />
    <set label='Jul 2006' value='365' />
    <set label='Aug 2006' value='357' />
    <set label='Sep 2006' value='375' />
    <set label='Oct 2006' value='345' />
    <set label='Nov 2006' value='655' />
    <set label='Dec 2006' value='435' />
    <set label='Jan 2007' value='586' />
</chart>

In the above chart, we're plotting consecutive months on the chart. So, if we show all the months, the chart gets cluttered. To avoid this, we've set labelStep as 4, so that every 4th x-axis label is only shown.

When you view the chart, you'll get following output:

How do I display short labels on the axis and show the full labels as tool tip text?

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

<chart numberPrefix='$' rotateValues='1'>
   <set label='J' toolText='January' value='434' />
   <set label='F' toolText='February' value='376' />
   <set label='M' toolText='March' value='343' />
   <set label='A' toolText='April' value='234' />
   <set label='M' toolText='May' value='356' />
   <set label='J' toolText='June' value='183' />
   <set label='J' toolText='July' value='365' />
   <set label='A' toolText='August' value='357' />
   <set label='S' toolText='September' value='375' />
   <set label='O' toolText='October' value='345' />
   <set label='N' toolText='November' value='655' />
   <set label='D' toolText='December' value='435' />
</chart>

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