Using chart grid lines

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 -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv.send()"
    height="600">

    <fx:Declarations>
         <!-- View source of the following page to see the structure of the data that Flex uses in this example. -->
         <mx:HTTPService id="srv" url="http://aspexamples.adobe.com/chart_examples/expenses-xml.aspx"/>
         <!-- To see data in an HTML table, go to http://aspexamples.adobe.com/chart_examples/expenses.aspx -->  

        <fx:Array id="bge">
            <mx:GridLines gridDirection="both"/>
        </fx:Array>
    </fx:Declarations>

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

  <s:Panel title="Column Chart">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
     <mx:ColumnChart id="myChart"
        showDataTips="true"
        dataProvider="{srv.lastResult.data.result}" 
        backgroundElements="{bge}">
        <mx:horizontalAxis>
           <mx:CategoryAxis 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}"/>
  </s:Panel>
</s:Application>
The executing SWF file for the previous example is shown below:
Note: The annotationElements property refers to any chart elements that appear in the foreground of your chart, and the backgroundElements property refers to any chart elements that appear behind the chart’s data series.

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 -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv.send()"
    height="600">
     
    <fx:Declarations>
        <!-- View source of the following page to see the structure of the data that Flex uses in this example. -->
        <mx:HTTPService id="srv" url="http://aspexamples.adobe.com/chart_examples/expenses-xml.aspx"/>
        <!-- To see data in an HTML table, go to http://aspexamples.adobe.com/chart_examples/expenses.aspx -->  
    </fx:Declarations>

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

  <s:Panel title="Column Chart">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
     <mx:ColumnChart id="myChart" 
            dataProvider="{srv.lastResult.data.result}" 
            showDataTips="true">
        <mx:backgroundElements>
           <mx:GridLines gridDirection="both"/>
        </mx:backgroundElements>

        <mx:horizontalAxis>
           <mx:CategoryAxis 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}"/>
  </s:Panel>
</s: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 -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv.send()"
    height="600">

    <fx:Declarations>
        <!-- View source of the following page to see the structure of the data that Flex uses in this example. -->
        <mx:HTTPService id="srv" url="http://aspexamples.adobe.com/chart_examples/expenses-xml.aspx"/>
        <!-- To see data in an HTML table, go to http://aspexamples.adobe.com/chart_examples/expenses.aspx -->  

        <fx:Array id="bge">
            <mx:GridLines 
                horizontalChangeCount="1" 
                verticalChangeCount="1"
                gridDirection="both"
            >
                <mx:horizontalStroke>
                    <mx:SolidColorStroke weight="3"/>
                </mx:horizontalStroke>
                <mx:verticalStroke>
                    <mx:SolidColorStroke weight="3"/>
                </mx:verticalStroke>
                <mx:horizontalFill>
                    <mx:SolidColor color="0x99033" alpha=".66"/>
                </mx:horizontalFill>
            </mx:GridLines>
        </fx:Array>
    </fx:Declarations>

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

  <s:Panel title="Column Chart">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
     <mx:ColumnChart id="myChart" 
        showDataTips="true"
        dataProvider="{srv.lastResult.data.result}"
        backgroundElements="{bge}">
        <mx:horizontalAxis>
           <mx:CategoryAxis 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}"/>
  </s:Panel>
</s: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 gridDirection 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 gridDirection 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 -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv.send()"
    height="600">

    <fx:Declarations>
        <!-- View source of the following page to see the structure of the data that Flex uses in this example. -->
        <mx:HTTPService id="srv" url="http://aspexamples.adobe.com/chart_examples/expenses-xml.aspx"/>
        <!-- To see data in an HTML table, go to http://aspexamples.adobe.com/chart_examples/expenses.aspx -->  

        <fx:Array id="bge">
        </fx:Array>

    </fx:Declarations>
    
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

  <s:Panel title="BubbleChart control with no grid lines">
     <s:layout>
         <s:VerticalLayout/>
     </s:layout>
    <mx:BubbleChart id="bc" 
        dataProvider="{srv.lastResult.data.result}"
        showDataTips="true" 
        backgroundElements="{bge}"> 
        <mx:series>
            <mx:BubbleSeries 
                xField="profit" 
                yField="expenses" 
                radiusField="amount" 
                displayName="Profit"/>
        </mx:series>   
    </mx:BubbleChart>
    <mx:Legend dataProvider="{bc}"/>
  </s:Panel>
</s: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 -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv.send()"
    height="600">

    <fx:Declarations>
        <!-- View source of the following page to see the structure of the data that Flex uses in this example. -->
        <mx:HTTPService id="srv" url="http://aspexamples.adobe.com/chart_examples/expenses-xml.aspx"/>
        <!-- To see data in an HTML table, go to http://aspexamples.adobe.com/chart_examples/expenses.aspx -->  
        
        <!-- Background element array. -->
        <fx:Array id="bge">
            <mx:GridLines styleName="myStyle">
                <mx:horizontalStroke>
                    <mx:SolidColorStroke weight="3"/>
                </mx:horizontalStroke>
                <mx:verticalStroke>
                    <mx:SolidColorStroke weight="3"/>
                </mx:verticalStroke>
            </mx:GridLines>
        </fx:Array>
    </fx:Declarations>

  <fx:Style>
     .myStyle {
        gridDirection:"both";
        horizontalShowOrigin:true;
        horizontalTickAligned:false;
        horizontalChangeCount:1; 
        verticalShowOrigin:false;
        verticalTickAligned:true; 
        verticalChangeCount:1;
        horizontalFill:#990033;
        horizontalAlternateFill:#00CCFF;      
     }  
  </fx:Style>

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

  <s:Panel title="Column Chart">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
     <mx:ColumnChart id="myChart"
        showDataTips="true"
        dataProvider="{srv.lastResult.data.result}" 
        backgroundElements="{bge}">
        <mx:horizontalAxis>
           <mx:CategoryAxis 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}"/>
  </s:Panel>
</s: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 -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="srv.send()"
    height="600">

    <fx:Declarations>
        <!-- View source of the following page to see the structure of the data that Flex uses in this example. -->
        <mx:HTTPService id="srv" url="http://aspexamples.adobe.com/chart_examples/expenses-xml.aspx"/>
        <!-- To see data in an HTML table, go to http://aspexamples.adobe.com/chart_examples/expenses.aspx -->  
    </fx:Declarations>

  <fx:Script><![CDATA[
     import mx.graphics.SolidColor;
     import mx.graphics.SolidColorStroke;
     import mx.charts.GridLines;

     [Bindable]
     public var bge:GridLines;

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

        var s:SolidColorStroke = new SolidColorStroke(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];
     }
  ]]></fx:Script>

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

  <s:Panel title="Column Chart">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
     <mx:ColumnChart id="myChart" 
        showDataTips="true"
        dataProvider="{srv.lastResult.data.result}"
        creationComplete="addGridLines()">
        <mx:horizontalAxis>
           <mx:CategoryAxis 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}"/>
  </s:Panel>
</s:Application>
The executing SWF file for the previous example is shown below: