How can I wrap text for long X-axis labels of my charts?

You can wrap the label text by setting the labelDisplay attribute in the chart element to the wrap mode. The wrap mode enables you to wrap your long x-axis labels in multiple lines.

Example:

<chart ... labelDisplay='wrap' ...>

If enough space is not available on chart, the wrapped mode will automatically trim labels, add ellipses (...) at end of them and would show tool-tips for such labels.

How can I rotate or slant the X-axis labels of my charts?

You can rotate the x-axis labels by 90 degree (i.e. to vertical) using the rotate mode in labelDisplay attribute .

Example:

 <chart ... labelDisplay='rotate' ...>

You can also slant the labels at 45 degree by using slantLabels attribute in the following way.

 <chart ...labelDisplay='Rotate' slantLabels='1' ...>

How can I stagger the X-axis labels of my charts to multiple lines so that they do not look crowded in my charts?

If you have too many X-axis labels that are getting crowded you can choose to stagger the labels to multiple lines (by default 2). To enable stagger mode just set:

 <chart ... labelDisplay='stagger' ...>

You can also choose the number of lines to stagger the labels.

To do this, set

<chart labelDisplay='Stagger' staggerLines='n' ..> 
where n is the number of lines.

Shown below is an example with staggerLines set to 3.

How can I hide some of the X-axis labels periodically (alternately or every nth) so that they don't look crowded in my charts?

You can opt to show every n-th label instead of all the labels by setting the labelStep attribute in the chart element. This is useful if your x-axis labels represent a continuous quantity like time, date, etc., which are incremental in nature. This enhances the clarity of the chart.

Example:

<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 example, 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.

How can I show specific data labels and hide the rest in my charts?

You can opt to show only specific data labels by using showLabels='0' and then setting showLabel='1' for the set you want to show the label. A chart having the same looks as under:

The XML for the above chart is:

 <chart numberPrefix=' showLabels='0'>
   <set label='Jan 2006' value='434' />
   <set label='Feb 2006' value='376' showLabels='1'/>
   <set label='Mar 2006' value='343' />
   <set label='Apr 2006' value='234' />
   <set label='May 2006' value='356' />
 </chart>

How can I define a common font property for all the data labels?

If you want to specify a single or common font property for all the text outside canvas area, you can use outCnvBaseFont attribute group. The font properties specified as a part of this attribute group will be applied to Caption, Sub-Caption, X-Axis & Y-Axis names, Data Labels, Divisional Line, and Trendline values.

The following attributes are a part of this group:

Example:

<chart caption='Quarterly Sales Summary' subcaption='Figures in $'  xAxis='Quarter' 
       yAxisName='Sales' outCnvBaseFont='Arial' 
       outCnvBaseFontSize='12' outCnvBaseFontColor='333333'>
     <set label='Quarter 1' value='420500' />
     <set label='Quarter 2' value='295400' />
     <set label='Quarter 3' value='523400' />
     <set label='Quarter 4' value='465400' />
</chart> 

As you can see above, all the text outside chart canvas has assumed the font properties specified as part of that attribute group.

How can I use styles to apply text effects (font name, size, color, background & border color , bold or italicized) to data labels?

You can use styles to define individual font properties for different text on the chart. Using styles, you can specify a different font name, size, color, background & border color and also make the text bold or italicized.

Example:

The example below shows a change in the basic font properties of the data labels.

<chart caption='Quarterly Sales Summary' subcaption='Figures in $'
       xAxisName='Quarter' yAxisName='Sales' showValues='0' >
     <set label='Qtr 1' value='420500' />
     <set label='Qtr 2' value='295400' />
     <set label='Qtr 3' value='523400' />
     <set label='Qtr 4' value='465400' />
      <styles>
         <definition>
             <style name='myLabelsFont' type='font' 
                    font='Arial' size='14' color='666666'
                    bold='1' underline='1'/>
         </definition>
         <application>
             <apply toObject='DataLabels' styles='myLabelsFont' />
         </application>
     </styles>
</chart> 

How can I define a background and border color for the data labels of my charts?

You can define a background and border color for the data labels using styles.

<chart caption='Quarterly Sales Summary' subcaption='Figures in $'
       xAxisName='Quarter' yAxisName='Sales' showValues='0' >
     <set label='Qtr 1' value='420500' />
     <set label='Qtr 2' value='295400' />
     <set label='Qtr 3' value='523400' />
     <set label='Qtr 4' value='465400' />
      <styles>
         <definition>
             <style name='myLabelsFont' type='font' 
                    bgColor='FFFFFF' borderColor='666666'/>
         </definition>
         <application>
             <apply toObject='DataLabels' styles='myLabelsFont' />
         </application>
     </styles>
</chart>

How can I apply (such as shadow, glow, blur, bevel etc.) to the data labels of my charts?

You can apply effects (shadow, glow, blur, bevel etc.) to the chart titles using styles.

Example:

In the given XML example, we have changed the font properties of the data labels and applied a shadow to it.

<chart caption='Quarterly Sales Summary' subcaption='Figures in $'
       xAxisName='Quarter' yAxisName='Sales' showValues='0' >
     <set label='Quarter 1' value='420500' />
     <set label='Quarter 2' value='295400' />
     <set label='Quarter 3' value='523400' />
     <set label='Quarter 4' value='465400' />
      <styles>
         <definition>
             <style name='myLabelsFont' type='font' 
                    font='Arial' size='14' color='666666'
                    bold='1' underline='1'/>
             <style name='myShadow' type='Shadow'
                    color='999999' angle='45'/>
        </definition>
        <application>
            <apply toObject='DataLabels' styles='myLabelsFont,myShadow' />
         </application>
     </styles>
</chart> 

To read more on Styles, please refer to FusionCharts and Styles.

How can I apply animation to the data labels of my charts?

You can apply animation effects to the data labels using styles. Shown below is an example which animates the x-position of the data labels from the center of the chart canvas to their respective positions.

<chart caption='Quarterly Sales Summary' subcaption='Figures in $'
       xAxisName='Quarter' yAxisName='Sales'>
     <set label='Quarter 1' value='420500' />
     <set label='Quarter 2' value='295400' />
     <set label='Quarter 3' value='523400' />
     <set label='Quarter 4' value='465400' />
      <styles>
         <definition>
             <style name='mynAnim' type='animation' type='animation' 
                    param='_x' start='$canvasCenterX' duration='1' />
         </definition>
         <application>
             <apply toObject='DataLabels' styles='myAnim' />
         </application>
     </styles>
</chart>