Handling long x-axis labels |
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:
Let's see each of them one by one. |
Wrap Mode |
By default, FusionCharts starts all the charts in wrap mode. 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'> |
![]() |
Rotating and Slanting Labels |
You can opt to rotate the x-axis labels by using <chart labelDisplay='Rotate' ..>. This method wouldn't work if you've non-english characters in your x-axis labels as FusionCharts uses embedded fonts to render rotated labels. 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: |
![]() |
Staggering labels on multiple lines |
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. |
![]() |
Showing every n-th label |
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: |
![]() |
Displaying short label on axis and showing full name as tool tip |
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: |
![]() |
In this section, we've just given you a brief idea of your control over x-axis. You can mix and match these ideas to effectively get a much better control over the x-axis. |