You can manipulate various aspects of the FusionCharts object by declaring its attribute properties. Here, we will manipulate the height and width of the example sales chart. The default width and height are 400 and 300 respectively. However, we can customize the chart size from the design view - directly by dragging the chart borders or setting the values in the Property Window. We can also set it through source view. Let's see how it looks in source view:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="com.fusioncharts.components.*">
<ns1:FusionCharts x="10" y="10" width="500" height="250" FCDataURL="Data.xml" FCChartType="Column3D"/>
</mx:Application>
In the above code, we have set the width and height of the chart to 500 and 250 respectively. However, if you do it in the design view using mouse pointer, the new width and height will automatically be set to the source code. Now, the chart will look like this:
Apart from setting height and width in absolute values, we can also specify height and width values in percentage. The percantage value represents the percentage of the width and height of the parent container. We extend our previous case by putting the chart in a panel container and aquiring it's height and width. In design view, we can drag a panel container and then drag the FusionCharts object within it. We have to set the height and width of the panel as 500 and 400 respectively. We also declare the height and width of the chart as 100%. In code view, it would look like this,
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="com.fusioncharts.components.*">
<mx:Panel x="10" y="10" width="500" height="400" >
<ns1:FusionCharts width="100%" height="100%" FCDataURL="Data.xml" FCChartType="Column3D"/>
</mx:Panel>
</mx:Application>
Now, the chart looks like: