As with other Flex components, the padding properties of a chart define an area between the outside bounds of the chart control and its content. Flex draws only the background fill in the padding area.

You can set the padding values for a chart control by using the paddingLeft and paddingRight properties that the chart control inherits from the UIComponent class. You can also use the paddingTop and paddingBottom properties that the chart control inherits from the ChartBase class.

Flex charting control elements also have gutters. The gutter is the area between the padding area and the actual axis line. Flex draws labels, titles, and tick marks for the axes in the gutter of the chart. Chart controls adjust the gutters to accommodate these enhancements to the axis, but you can specify explicit gutter values.

The following example shows the locations of the gutters and the padding area on a chart:

The following style properties define the size of a chart's gutters:

• gutterLeft
• gutterRight
• gutterTop
• gutterBottom

The default value of the gutter styles is undefined, which means that the chart determines appropriate values. Overriding the default value and explicitly setting gutter values can improve the speed of rendering charts, because Flex does not have to dynamically calculate the gutter size. However, it can also cause clipping of axis labels or other undesirable effects.

You set gutter styles on the chart control. The following example creates a region that is 50 pixels wide for the axis labels, titles, and tick marks, by explicitly setting the values of the gutterLeft, gutterRight, and gutterBottom style properties. It also sets the paddingTop property to 20.

<?xml version="1.0"?>
<!-- charts/GutterStyles.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script><![CDATA[
      import mx.collections.ArrayCollection;

      [Bindable]
      public var expenses:ArrayCollection = new ArrayCollection([
         {Month:"Jan", Profit:2000, Expenses:1500},
         {Month:"Feb", Profit:1000, Expenses:200},
         {Month:"Mar", Profit:1500, Expenses:500}
      ]);
  ]]></mx:Script>

  <mx:Style>
     ColumnChart {
        gutterLeft:50;
        gutterRight:50;
        gutterBottom:50;
        paddingTop:20;
     }
  </mx:Style>

  <mx:Panel title="Setting Gutter Properties as Styles">
     <mx:ColumnChart id="column" dataProvider="{expenses}" showDataTips="true">
        <mx:horizontalAxis>
           <mx:CategoryAxis 
                dataProvider="{expenses}" 
                categoryField="Month"
            />
        </mx:horizontalAxis>
        <mx:series>
           <mx:ColumnSeries 
                xField="Month" 
                yField="Profit"
                displayName="Profit"
           />
           <mx:ColumnSeries 
                xField="Month" 
                yField="Expenses"
                displayName="Expenses"
           />
        </mx:series>
     </mx:ColumnChart>
     <mx:Legend dataProvider="{column}"/>
  </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:

Alternatively, you can set the gutter properties inline, as the following example shows:

<?xml version="1.0"?>
<!-- charts/GutterProperties.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script><![CDATA[
      import mx.collections.ArrayCollection;

      [Bindable]
      public var expenses:ArrayCollection = new ArrayCollection([
         {Month:"Jan", Profit:2000, Expenses:1500},
         {Month:"Feb", Profit:1000, Expenses:200},
         {Month:"Mar", Profit:1500, Expenses:500}
      ]);
  ]]></mx:Script>

  <mx:Panel title="Setting Gutter Properties">
     <mx:ColumnChart id="myChart" 
        dataProvider="{expenses}"
        gutterLeft="50" 
        gutterRight="50" 
        gutterBottom="50" 
        gutterTop="20"
        showDataTips="true"
     >
        <mx:horizontalAxis>
           <mx:CategoryAxis 
                dataProvider="{expenses}" 
                categoryField="Month"
           />
        </mx:horizontalAxis>
        <mx:series>
           <mx:ColumnSeries 
                xField="Month" 
                yField="Profit"
                displayName="Profit"
           />
           <mx:ColumnSeries 
                xField="Month" 
                yField="Expenses"
                displayName="Expenses"
           />
        </mx:series>
     </mx:ColumnChart>
     <mx:Legend dataProvider="{myChart}"/>
  </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:

In addition to the gutter and padding properties, you can set the labelGap property of a chart's axes. The labelGap property defines the distance, in pixels, between the tick marks and the axis labels. You set the labelGap property on the AxisRenderer tag, as the following example shows:

<?xml version="1.0"?>
<!-- charts/LabelGaps.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script><![CDATA[
        import mx.collections.ArrayCollection;

        [Bindable]
        public var expenses:ArrayCollection = new ArrayCollection([
            {Month:"Jan", Profit:2000, Expenses:1500},
            {Month:"Feb", Profit:1000, Expenses:200},
            {Month:"Mar", Profit:1500, Expenses:500}
        ]);
    ]]></mx:Script>

    <mx:Panel title="Setting Label Gap Properties">
        <mx:ColumnChart id="myChart" 
            dataProvider="{expenses}" 
            gutterLeft="50" 
            gutterRight="50" 
            gutterBottom="50" 
            gutterTop="20"
            showDataTips="true"
        >
            <mx:horizontalAxis>
                <mx:CategoryAxis 
                    id="a1"
                    dataProvider="{expenses}" 
                    categoryField="Month"
                />
            </mx:horizontalAxis>

            <mx:horizontalAxisRenderers>
                <mx:AxisRenderer 
                    axis="{a1}"                 
                    labelGap="20"
                />
            </mx:horizontalAxisRenderers>

            <mx:verticalAxisRenderers>
                <mx:AxisRenderer 
                    axis="{a1}"                 
                    labelGap="20"
                />
            </mx:verticalAxisRenderers>

            <mx:series>
                <mx:ColumnSeries
                    xField="Month"
                    yField="Profit"
                    displayName="Profit"
                />
                <mx:ColumnSeries
                    xField="Month"
                    yField="Expenses"
                    displayName="Expenses"
                />
            </mx:series>
        </mx:ColumnChart>
        <mx:Legend dataProvider="{myChart}"/>
    </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:

You can specify the alignment of axis labels by using the labelAlign property on the AxisRenderer. For horizontal axis labels, you can specify center, left, and right. For example, in a ColumnChart control, if you set the value of the labelAlign property to left, Flex renders the labels at the left of the bottoms of the columns. For vertical axis labels, you can specify center, top, and bottom.

How different the locations of the labels are depends on the available space (for example, the width of the columns) and the font size of the labels.

The following example lets you change the label alignment for the vertical and horizontal axes.

<?xml version="1.0"?>
<!-- charts/ToggleLabelAlignment.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script><![CDATA[
    import mx.collections.ArrayCollection;

    [Bindable]
    public var expenses:ArrayCollection = new ArrayCollection([
        {Month:"Jan", Profit:2000, Expenses:1500},
        {Month:"Feb", Profit:1000, Expenses:200},
        {Month:"Mar", Profit:1500, Expenses:500}
    ]);

    [Bindable]
    private var aligns:Array = ["center", "left", "right"];
    [Bindable]
    private var aligns2:Array = ["center", "top", "bottom"];

    private function toggleLabelAlignment(s:String):void {
        if ( s == 'hor' ) {
            myHAR.setStyle("labelAlign", cb1.selectedItem);
        } else if ( s == 'ver' ) {
            myVAR.setStyle("labelAlign", cb2.selectedItem);        
        }
    }
  ]]></mx:Script>

  <mx:Panel title="Toggling Label Alignment">
     <mx:ColumnChart id="myChart" dataProvider="{expenses}" showDataTips="true">
        <mx:horizontalAxis>
           <mx:CategoryAxis id="haxis" categoryField="Month"/>
        </mx:horizontalAxis>
        
        <mx:verticalAxis>
            <mx:LinearAxis id="vaxis"/>
        </mx:verticalAxis>
        
        <mx:horizontalAxisRenderers>
            <mx:AxisRenderer id="myHAR" axis="{haxis}"/>
        </mx:horizontalAxisRenderers>

        <mx:verticalAxisRenderers>
            <mx:AxisRenderer id="myVAR" axis="{vaxis}"/>
        </mx:verticalAxisRenderers>
        
        <mx:series>
           <mx:ColumnSeries xField="Month" yField="Profit" displayName="Profit"/>
           <mx:ColumnSeries xField="Month" yField="Expenses" displayName="Expenses"/>
        </mx:series>
     </mx:ColumnChart>
     <mx:Form>
        <mx:FormItem label="Horizontal Labels">
            <mx:ComboBox id="cb1" 
                dataProvider="{aligns}" 
                change="toggleLabelAlignment('hor')"
            />
        </mx:FormItem>
        <mx:FormItem label="Vertical Labels">
            <mx:ComboBox id="cb2" 
                dataProvider="{aligns2}" 
                change="toggleLabelAlignment('ver')"
            />
        </mx:FormItem>
     </mx:Form>     
     <mx:Legend dataProvider="{myChart}"/>
  </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below: