Advanced Charting> Handling long x-axis names
 

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. Here, we've explained a few methods which help you take better control of longer x-axis names more efficiently.

You have the following options when working with long/too many x-axis names:

  1. Rotating Names
  2. Showing only every n(th) name instead of all names
  3. Showing abbreviated names and using hover caption (tool tip) to display the full names.

Let's see each of them in action quickly.
Rotating x-axis names

All the charts in FusionCharts suite, having a x-axis supports rotation of x-axis labels. You use the rotateNames attribute of the <graph> element to rotate the names:

<graph .. rotateNames='1' ... />

The rotation option is useful when you have a large number of short x-axis names, as in the example below:
 
Showing only every n(th) name instead of all names
If you have a continuous stream of x-axis labels, like hours of day, dates of a month, days of a week etc, you can opt to show every n(th) name instead of every name. Shown below is an example:
The XML data for this is shown as under:
<graph caption='Site hits per hour' subCaption='In Thousands' numdivlines='9' showgridbg='1' lineThickness='1' animation='1' showNames='1' showValues='0' numVDivLines='22' yaxisminvalue='0' formatNumberScale='1' rotateNames='1' areaAlpha='90' showLimits='1' decimalPrecision='1' showAlternateHGridColor='1' divLineDecimalPrecision='0' limitsDecimalPrecision='0' showAreaBorder='1'>
   <categories >
      <category name='00:00' />
      <category name='01:00' showName='0'/>
      <category name='02:00' />
      <category name='03:00' showName='0'/>
      <category name='04:00' />
      <category name='05:00' showName='0'/>
      <category name='06:00' />
      <category name='07:00' showName='0'/>
      <category name='08:00' />
      <category name='09:00' showName='0'/>
      <category name='10:00' />
      <category name='11:00' showName='0'/>
      <category name='12:00' />
      <category name='13:00' showName='0'/>
      <category name='14:00' />
      <category name='15:00' showName='0'/>
      <category name='16:00' />
      <category name='17:00' showName='0'/>
      <category name='18:00' />
      <category name='19:00' showName='0'/>
      <category name='20:00' />
      <category name='21:00' showName='0'/>
      <category name='22:00' />
      <category name='23:00' showName='0'/>
   </categories>
   <dataset seriesname='Sat' color='0080C0' areaBorderColor='0080C0'>
      <set value='36' />
      <set value='71' />
      <set value='85' />
      <set value='92' />
      <set value='101' />
      <set value='116' />
      <set value='164' />
      <set value='180' />
      <set value='192' />
      <set value='262' />
      <set value='319' />
      <set value='489' />
      <set value='633' />
      <set value='904' />
      <set value='1215' />
      <set value='1358' />
      <set value='1482' />
      <set value='1666' />
      <set value='1811' />
      <set value='2051' />
      <set value='2138' />
      <set value='2209' />
      <set value='2247' />
      <set value='2301' />
   </dataset>
   <dataset seriesname='Sun' color='008040' areaBorderColor='008040'>
      <set value='23' />
      <set value='40' />
      <set value='62' />
      <set value='118' />
      <set value='130' />
      <set value='139' />
      <set value='158' />
      <set value='233' />
      <set value='297' />
      <set value='379' />
      <set value='503' />
      <set value='687' />
      <set value='746' />
      <set value='857' />
      <set value='973' />
      <set value='1125' />
      <set value='1320' />
      <set value='1518' />
      <set value='1797' />
      <set value='1893' />
      <set value='2010' />
      <set value='2057' />
      <set value='2166' />
      <set value='2197' />
   </dataset>
   <dataset seriesname='Mon' color='808080' areaBorderColor='808080'>
      <set value='37' />
      <set value='45' />
      <set value='70' />
      <set value='79' />
      <set value='168' />
      <set value='337' />
      <set value='374' />
      <set value='431' />
      <set value='543' />
      <set value='784' />
      <set value='1117' />
      <set value='1415' />
      <set value='2077' />
      <set value='2510' />
      <set value='3025' />
      <set value='3383' />
      <set value='3711' />
      <set value='4016' />
      <set value='4355' />
      <set value='4751' />
      <set value='5154' />
      <set value='5475' />
      <set value='5696' />
      <set value='5801' />
   </dataset>
   <dataset seriesname='Tue' color='800080' areaBorderColor='800080'>
      <set value='54' />
      <set value='165' />
      <set value='175' />
      <set value='190' />
      <set value='212' />
      <set value='241' />
      <set value='308' />
      <set value='401' />
      <set value='481' />
      <set value='851' />
      <set value='1250' />
      <set value='2415' />
      <set value='2886' />
      <set value='3252' />
      <set value='3673' />
      <set value='4026' />
      <set value='4470' />
      <set value='4813' />
      <set value='4961' />
      <set value='5086' />
      <set value='5284' />
      <set value='5391' />
      <set value='5657' />
      <set value='5847' />
   </dataset>
   <dataset seriesname='Wed' color='FF8040' areaBorderColor='FF8040'>
      <set value='111' />
      <set value='120' />
      <set value='128' />
      <set value='140' />
      <set value='146' />
      <set value='157' />
      <set value='190' />
      <set value='250' />
      <set value='399' />
      <set value='691' />
      <set value='952' />
      <set value='1448' />
      <set value='1771' />
      <set value='2316' />
      <set value='2763' />
      <set value='3149' />
      <set value='3637' />
      <set value='4015' />
      <set value='4262' />
      <set value='4541' />
      <set value='4837' />
      <set value='5016' />
      <set value='5133' />
      <set value='5278' />
   </dataset>
   <dataset seriesname='Thu' color='FFFF00' areaBorderColor='FFFF00'>
      <set value='115' />
      <set value='141' />
      <set value='175' />
      <set value='189' />
      <set value='208' />
      <set value='229' />
      <set value='252' />
      <set value='440' />
      <set value='608' />
      <set value='889' />
      <set value='1334' />
      <set value='1637' />
      <set value='2056' />
      <set value='2600' />
      <set value='3070' />
      <set value='3451' />
      <set value='3918' />
      <set value='4140' />
      <set value='4296' />
      <set value='4519' />
      <set value='4716' />
      <set value='4881' />
      <set value='5092' />
      <set value='5249' />
   </dataset>
   <dataset seriesname='Fri' color='FF0080' areaBorderColor='FF0080'>
      <set value='98' />
      <set value='1112' />
      <set value='1192' />
      <set value='1219' />
      <set value='1264' />
      <set value='1282' />
      <set value='1365' />
      <set value='1433' />
      <set value='1559' />
      <set value='1823' />
      <set value='1867' />
      <set value='2198' />
      <set value='1112' />
      <set value='1192' />
      <set value='1219' />
      <set value='2264' />
      <set value='2282' />
      <set value='2365' />
      <set value='2433' />
      <set value='2559' />
      <set value='2823' />
      <set value='2867' />
      <set value='2867' />
      <set value='2867' />
   </dataset>
</graph>
In the above code, we've set showName='0' attribute for every alternate category names. This hides every alternate category names, thus avoiding too much of cluttering on the chart.
 
Showing abbreviated names and using hover caption (tool tip) to display the full names.
You can show abbreviated names on the x-axis and show the full names as hover caption (tool tip). Shown below is an example:
<graph caption='Sales by Product' subCaption='March 2003' showValues='0' divLineDecimalPrecision='1' limitsDecimalPrecision='1' PYAxisName='Amount' SYAxisName='Quantity'>
   <categories>
      <category name='Camem...' hoverText='Camembert Pierrot' />
      <category name='Flote...' hoverText='Flotemysost' />
      <category name='Geito...' hoverText='Geitost' />
      <category name='Gorgo...' hoverText='Gorgonzola Telino' />
      <category name='Gudbr...' hoverText='Gudbrandsdalsost' />
      <category name='Masca...' hoverText='Mascarpone Fabioli' />
      <category name='Mozza...' hoverText='Mozzarella di Giovanni' />
      <category name='Queso...' hoverText='Queso Cabrales' />
      <category name='Queso...' hoverText='Queso Manchego La Pastora' />
      <category name='Racle...' hoverText='Raclette Courdavault' />
   </categories>
   <dataset seriesName='Amount' color='B2FF66' numberPrefix='$' >
      <set value='5854.8' />
      <set value='4171' />
      <set value='137.5' />
      <set value='187.5' />
      <set value='2246.4' />
      <set value='2696' />
      <set value='1287.6' />
      <set value='210' />
      <set value='1603.6' />
      <set value='16285.5' />
   </dataset>
   <dataset lineThickness='3' seriesName='Quantity' parentYAxis='S' color='00B400' anchorBorderColor='009933'>
      <set value='174' />
      <set value='197' />
      <set value='55' />
      <set value='15' />
      <set value='66' />
      <set value='85' />
      <set value='37' />
      <set value='10' />
      <set value='44' />
      <set value='322' />
   </dataset>
</graph>

In the above code, we've specified the names of <category> in abbreviated form, but the entire text is present as hoverText (tool tip).

      <category name='Camem...' hoverText='Camembert Pierrot' />

So, when you see the chart, the abbreviated name appears on the chart, rendering it a clearer look, but without missing on any data, as the entire name shows up when the user moves his mouse over the data item.