In this part, the graph attributes have been classified based on the different chart elements. We'll show you how to control and manipulate the various aspects of the graph.

Setting chart background, canvas, grid background
To change the chart background, we use the bgColor attribute of <graph> element in the following way:
<graph bgColor='FFFFDD' …>

Similarly, to change the canvas color and grid background color, use the following:
<graph canvasBgColor='FF0000' gridBgColor='F12345' …>

Now, to hide the grid background/canvas, you could use the following:
<graph showGridBg='0' showCanvas='0' …>

Setting graph caption, sub caption, x-axis label, y-axis label, y-axis upper limit, y-axis lower limit, number Prefix, number Suffix and number Formatting option
To set the graph caption and sub-caption you can use the following attributes:
<graph caption='My Caption' subCaption='My Sub-Caption' … >

Similarly, you could provide the x-axis label and y-axis label using xAxisName and yAxisName attributes.

In case you don't want to show the x-axis and y-axis names, you could use the following:
<graph xAxisName=' ' yAxisName=' ' …>

To set the y-axis upper and lower limit, yAxisMinValue and yAxisMaxValue attributes are used in the following way:
<graph yAxisMinValue='0' yAxisMaxValue='100' ..>
However, if you don't specify the above values, FusionCharts automatically calculates them using the data you have provided.

In case you don't want to show the y-Axis limit textboxes (which appear beside the graph grid), you could use the showYLimits attribute to hide them as below:
<graph showYLimits='0' …>

To set the number of places of decimals for all the numbers on the chart, you can use decimalPrecision attribute:
<graph decimalPrecision='2' …>

Now, if you want to format numbers present on your graph, you can use the formatNumber attribute in the following way:
<graph formatNumber='1' …>
All the numbers will now appear with the formatted styling i.e., 123456.23 would appear as 123,456.23 – 100023.0 would appear 100,023.

If you want to format the scale of numbers present on your graph, you can use the formatNumberScale attribute in the following way:
<graph formatNumberScale='1' …>
All the numbers will now appear with the formatted styling i.e., 12345.23 would appear as 1.23K (with decimalPrecision set to 2). 1234567.89 would appear as 1.2M (with decimalPrecision set to 1)

Similarly if you wanted to add some textual suffix/prefix to the numbers present on the graph, you can use the numberPrefix and numberSuffix attributes in the following way:
<graph numberPrefix='$'>
Now, all numbers on the graph would appear as $xxxxx- $12423
<graph numberSuffix='%'>
Example: 40%, 43.3%

You could also use both numberPrefix and numberSuffix at the same time to format numbers. For example:
<graph numberPrefix='$' numberSuffix=' /week' ..>
All the numbers on the graph would now appear as $xxxx/week or $123/week.

If you want to change the decimal separator characters and thousands separator of all the numbers on the chart, you can use decimalSeparator and thousandSeparator attributes as under:
<graph decimalSeparator=',' thousandSeparator='.' ..>

Setting data names, data values
Data for a particular data set is provided using the <set> elements in the following way:

<set name='Jan' value='21345' alpha='70' link='ShowDetails.asp?Mon=Jan' showName='1'>

Here, “Jan” is the set name which would appear as the x-axis name for the data set. “70” is the x-axis value for the same. The data set would have a transparent look as it's alpha is 70. It will also support drill-down as we have specified the link as “ShowDetails.asp?Mon=Jan”.

Here, we have also provided another attribute showName='1' which sets the configuration of whether the x-axis name for this particular data set would be shown on the graph. For example, if you have to plot a number of data sets on the graph (let's say daily hits for a site), then it would be wise to show only the following data set names (daily dates) to maintain the legibility of the graph- otherwise it would become too clustered.
1, 5, 10, 15, 20, 25, 31

The image below depicts such a graph:

Similarly, you could opt to hide all the data values of the graph using showValues attribute of the <graph> element: <graph showValues='0' …>

Similarly, showNames attribute could be used to hide all the data x-axis name: <graph showNames='0' …>

Similarly, in the case of line and pipe chart, you can also add vertical divisional lines as under:
<graph numVDivLines='9' vDivlinecolor='CCCCCC' vDivlineThickness='1' vDivlineAlpha='80' …>

Trend-lines are helpful when you want to distinguish a specific set of data from a base value or some calculated values. For example, if you were to plot a graph depicting the profit figures from 4 products, you could draw a trend-line to illustrate the profit from those products in the last financial year – thus it becomes easy to interpret the growth/decline of product value as compared to the last year figures. Trend-lines can be drawn using <trendlines> element as under:
<trendlines>
<line value='189' displayValue='Average' color='FF0000' thickness='1'/>
<line value='229' displayValue='High' color='009999' thickness='1'/>
</trendlines>

You can also present a trend zone by enhancing the trend line thickness, make it transparent also by specifying alpha values.

Zero planes are the planes/lines that becomes the base line of the chart when the chart contains both positive and negative values. There are a few parameters that you could use to control the zero plane: zeroPlaneColor and zeroPlaneAlpha.
Example: <graph zeroPlaneColor='FFFDDD' zeroPlaneAlpha='40' …>

Setting the hover Caption Box
Hover caption box is the tool tip that is displayed when a user rolls his mouse pointer over a particular data set. You could opt to show the hover caption by setting the showHoverCap attribute of the graph element to 1:
<graph showHoverCap='1' …>

Similarly, if you wish to hide it, just set this attribute to 0.

The hover caption box has a few customizable properties which you could use to customize its appearance.
Example: <graph showHoverCap='1' hovercapbg='FFECAA' hovercapborder='F47E00' ..>

The data name and the data value shown in the hover caption box is separated by a character known as hover caption separator character. You could change this character by assigning a new character (/set of characters) to the hovercapSepChar attribute of the <graph> element as under:
<graph showHoverCap='1' hovercapbg='FFECAA' hovercapborder='F47E00' hovercapSepChar=':' …>
With this, the data name and value would now be separated by a : (colon) rather than the default comma. If you don't wish any separator, enter a blank value (by pressing Enter)

Setting the Legend Box, Navigation Buttons, Anchors
In case of pie chart/doughnut chart, you can set the properties of the legend box and the navigation buttons as under:
<graph ... legendboxbgcolor='F1F1F1' legendboxbrdrcolor='333333' navbtncolor='666666' ...>

In case of line chart, you could change the anchor properties as under:
<graph ... anchorbgcolor="FF0000" anchorbrdrcolor="FF0000" anchorscale="100"...>