All charts except the PieChart control have grid lines by default. You can control those grid lines with the CSS gridLinesStyleName property, and with the chart series' backgroundElements and annotationElements properties.

You can include horizontal, vertical, or both grid lines in your chart with the GridLines object. You can set these behind the data series by using the chart's backgroundElements property or in front of the data series by using the annotationElements property.

The following example turns on grid lines in both directions and applies them to the chart:

<?xml version="1.0"?>
<!-- charts/GridLinesBoth.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:Array id="bge">
     <mx:GridLines direction="both"/>
  </mx:Array>

  <mx:Panel title="Column Chart">
     <mx:ColumnChart id="myChart"
        showDataTips="true"
        dataProvider="{expenses}" 
        backgroundElements="{bge}"
     >
        <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:

You can also define the grid lines inside each chart control's definition, as the following example shows:

<?xml version="1.0"?>
<!-- charts/GridLinesBothInternal.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="Column Chart">
     <mx:ColumnChart id="myChart" dataProvider="{expenses}" showDataTips="true">
        <mx:backgroundElements>
           <mx:GridLines direction="both"/>
        </mx:backgroundElements>

        <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:

To define the fills and strokes for grid lines, you use the horizontalStroke, verticalStroke, horizontalFill, and verticalFill properties. The following properties also define the appearance of grid lines:

• horizontalAlternateFill
• horizontalChangeCount
• horizontalOriginCount
• horizontalShowOrigin
• horiztontalTickAligned
• verticalAlternateFill
• verticalChangeCount
• verticalOriginCount
• verticalShowOrigin
• verticalTickAligned

For information on working with strokes, see Using strokes with chart controls. For more information on using the backgroundElements and annotationElements properties, see Using ChartElement objects.

You can manipulate the appearance of the grid lines directly in MXML, with ActionScript, or with CSS. The following sections describe techniques for formatting grid lines for chart objects.

Formatting chart grid lines with MXML

To control the appearance of the grid lines, you can specify an array of GridLines objects as MXML tags, as the following example shows:

<?xml version="1.0"?>
<!-- charts/GridLinesFormatMXML.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:Array id="bge">
     <mx:GridLines 
        horizontalChangeCount="1" 
        verticalChangeCount="1"
        direction="both"
     >
        <mx:horizontalStroke>
           <mx:Stroke weight="3"/>
        </mx:horizontalStroke>
        <mx:verticalStroke>
           <mx:Stroke weight="3"/>
        </mx:verticalStroke>
        <mx:horizontalFill>
           <mx:SolidColor color="0x99033" alpha=".66"/>
        </mx:horizontalFill>
     </mx:GridLines>
  </mx:Array>

  <mx:Panel title="Column Chart">
     <mx:ColumnChart id="myChart" 
        showDataTips="true"
        dataProvider="{expenses}"
        backgroundElements="{bge}"
     >
        <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:

This example uses the changeCount property to specify that Flex draws grid lines at every tick mark along the axis, and sets the direction property to both. This causes Flex to draw grid lines both horizontally and vertically. You could also specify horizontal or vertical as values for the direction property.

To remove grid lines entirely, you can set the backgroundElements property to an empty Array, as the following example shows:

<?xml version="1.0"?>
<!-- charts/NoGridLines.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            private var s1:ArrayCollection = new ArrayCollection( [
                {"x": 20, "y": 10, "r1":10 },
                {"x": 40, "y": 5, "r1":20 } ,
                {"x": 60, "y": 0, "r1":30 }]);
                
    ]]>
    </mx:Script>
    
    <mx:Array id="bge">
    </mx:Array>
    
  <mx:Panel title="BubbleChart control with no grid lines">
    <mx:BubbleChart id="bc" 
        showDataTips="true" 
        backgroundElements="{bge}"
    > 
        <mx:series>
            <mx:BubbleSeries 
                dataProvider="{s1}" 
                displayName="series1" 
                xField="x" 
                yField="y" 
                radiusField="r1"
            />
        </mx:series>   
    </mx:BubbleChart>
    <mx:Legend dataProvider="{bc}"/>
  </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:

You can also change the appearance of grid lines by using filters such as a drop shadow, glow, or bevel. For more information, see Using filters with chart controls.

Formatting chart grid lines with CSS

You can set the style of grid lines by applying a CSS style to the GridLines object. The following example applies the myStyle style to the grid lines:

<?xml version="1.0"?>
<!-- charts/GridLinesFormatCSS.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>
     .myStyle {
        direction:"both";
        horizontalShowOrigin:true;
        horizontalTickAligned:false;
        horizontalChangeCount:1; 
        verticalShowOrigin:false;
        verticalTickAligned:true; 
        verticalChangeCount:1;
        horizontalFill:#990033;
        horizontalAlternateFill:#00CCFF;      
     }  
  </mx:Style>

  <mx:Array id="bge">
     <mx:GridLines styleName="myStyle">
        <mx:horizontalStroke>
           <mx:Stroke weight="3"/>
        </mx:horizontalStroke>
        <mx:verticalStroke>
           <mx:Stroke weight="3"/>
        </mx:verticalStroke>
     </mx:GridLines>
  </mx:Array>

  <mx:Panel title="Column Chart">
     <mx:ColumnChart id="myChart"
        showDataTips="true"
        dataProvider="{expenses}" 
        backgroundElements="{bge}"
     >
        <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:

Formatting chart grid lines with ActionScript

You can manipulate the GridLines at run time with ActionScript. The following example adds filled grid lines in front of and behind the chart's series:

<?xml version="1.0"?>
<!-- charts/GridLinesFormatActionScript.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script><![CDATA[
     import mx.graphics.SolidColor;
     import mx.graphics.Stroke;
     import mx.charts.GridLines;
     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]
     public var bge:GridLines;

     public function addGridLines():void {
        bge = new GridLines();

        var s:Stroke = new Stroke(0xff00ff, 2);
        bge.setStyle("horizontalStroke", s);

        var f:SolidColor = new SolidColor(0x990033, .3);
        bge.setStyle("horizontalFill",f);

        var f2:SolidColor = new SolidColor(0x336699, .3);
        bge.setStyle("horizontalAlternateFill",f2);

        myChart.backgroundElements = [bge];
     }
  ]]></mx:Script>

  <mx:Panel title="Column Chart">
     <mx:ColumnChart id="myChart" 
        showDataTips="true"
        dataProvider="{expenses}"
        creationComplete="addGridLines()"
     >
        <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: