Using strokes with chart controls

You use the Stroke class with the chart series and grid lines to control the properties of the lines that Flex uses to draw chart elements.

The following table describes the properties that you use to control the appearance of strokes:

The following example defines a line width of 2 pixels, one with a dark gray border (0x808080) and the other with a light gray border (0xC0C0C0) for the borders of chart items in a

<?xml version="1.0"?>
<!-- charts/BasicBarStroke.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="Bar Chart">
     <mx:BarChart id="myChart" dataProvider="{expenses}" showDataTips="true">
        <mx:verticalAxis>
           <mx:CategoryAxis 
                dataProvider="{expenses}" 
                categoryField="Month"
           />
        </mx:verticalAxis>
        <mx:series>
           <mx:BarSeries 
                yField="Month" 
                xField="Profit" 
                displayName="Profit"
            >
            <mx:stroke>
                <mx:Stroke 
                    color="0x808080" 
                    weight="2" 
                    alpha=".8"
                />
            </mx:stroke>
           </mx:BarSeries>
           <mx:BarSeries 
                yField="Month" 
                xField="Expenses" 
                displayName="Expenses"
           >
            <mx:stroke>
                <mx:Stroke 
                    color="0xC0C0C0" 
                    weight="2" 
                    alpha=".8"
                />
            </mx:stroke>
           </mx:BarSeries>
        </mx:series>
     </mx:BarChart>
     <mx:Legend dataProvider="{myChart}"/>
  </mx:Panel>
</mx:Application>

The executing SWF file for the previous example is shown below:

Defining AxisRenderer properties with strokes

You can use strokes to define tick marks and other properties of an AxisRenderer, as the following example shows:

<?xml version="1.0"?>
<!-- charts/AxisRendererStrokes.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script><![CDATA[
        [Bindable]
        public var aapl:Array = [
            {date:"1-Aug-05",open:42.57,high:43.08,low:42.08,close:42.75},
            {date:"2-Aug-05",open:42.89,high:43.5,low:42.61,close:43.19},
            {date:"3-Aug-05",open:43.19,high:43.31,low:42.77,close:43.22},
            {date:"4-Aug-05",open:42.89,high:43,low:42.29,close:42.71},
            {date:"5-Aug-05",open:42.49,high:43.36,low:42.02,close:42.99},
            {date:"8-Aug-05",open:43,high:43.25,low:42.61,close:42.65},
            {date:"9-Aug-05",open:42.93,high:43.89,low:42.91,close:43.82},
            {date:"10-Aug-05",open:44,high:44.39,low:43.31,close:43.38},
            {date:"11-Aug-05",open:43.39,high:44.12,low:43.25,close:44},
            {date:"12-Aug-05",open:43.46,high:46.22,low:43.36,close:46.1},
        ];
    ]]></mx:Script>

    <mx:HLOCChart id="myChart" 
        dataProvider="{aapl}" 
        showDataTips="true"
    >
        <mx:horizontalAxisRenderers>
            <mx:AxisRenderer 
                placement="bottom" 
                canDropLabels="true"
                tickPlacement="inside" 
                tickLength="10" 
                minorTickPlacement="inside" 
                minorTickLength="5"
                axis="{a1}"
            >
                <mx:axisStroke>
                    <mx:Stroke color="#000080" weight="1"/>
                </mx:axisStroke>

                <mx:tickStroke>
                    <mx:Stroke color="#000060" weight="1"/>
                </mx:tickStroke>

                <mx:minorTickStroke>
                    <mx:Stroke color="#100040" weight="1"/>
                </mx:minorTickStroke>
            </mx:AxisRenderer>
        </mx:horizontalAxisRenderers>

        <mx:verticalAxis>
            <mx:LinearAxis 
                id="a1"
                minimum="30" 
                maximum="50"
            />
        </mx:verticalAxis>

        <mx:series>
            <mx:HLOCSeries 
                dataProvider="{aapl}" 
                openField="open"
                highField="high" 
                lowField="low" 
                closeField="close"
                displayName="AAPL"
            >
            </mx:HLOCSeries>
        </mx:series>
    </mx:HLOCChart>
    <mx:Legend dataProvider="{myChart}"/>
</mx:Application>

The executing SWF file for the previous example is shown below:

Notice that any time you use an AxisRenderer, you must explicitly set the axis to which it is applied with the renderer's axis property.

You can define a stroke object using an MXML tag, and then bind that stroke object to the chart's renderer properties. For an example, see Applying styles by binding tag definitions.

Using strokes in ActionScript

You can instantiate and manipulate a Stroke object in ActionScript by using the mx.graphics.Stroke class. You can then use the setStyle() method to apply the Stroke object to the chart, as the following example shows:

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

     [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}
     ]);

     public function changeStroke(e:Event):void {
        var s:Stroke = new Stroke(0x001100,2);
        s.alpha = .5;
        s.color = 0x0000FF;
        har1.setStyle("axisStroke",s);
        var1.setStyle("axisStroke",s);
     }
  ]]></mx:Script>

  <mx:Stroke id="baseAxisStroke" 
    color="0x884422" 
    weight="10" 
    alpha=".25" 
    caps="square"
  />

  <mx:Panel title="Column Chart">
     <mx:ColumnChart id="myChart" dataProvider="{expenses}" showDataTips="true">
        <mx:horizontalAxis>
           <mx:CategoryAxis 
                id="a1"
                dataProvider="{expenses}" 
                categoryField="Month"
           />
        </mx:horizontalAxis>

        <mx:horizontalAxisRenderers>
           <mx:AxisRenderer id="har1" axis="{a1}">
                <mx:axisStroke>{baseAxisStroke}</mx:axisStroke>
           </mx:AxisRenderer>
        </mx:horizontalAxisRenderers>

        <mx:verticalAxisRenderers>
           <mx:AxisRenderer id="var1" axis="{a1}">
                <mx:axisStroke>{baseAxisStroke}</mx:axisStroke>
           </mx:AxisRenderer>
        </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:Button id="b1"
    click="changeStroke(event)"
    label="Change Stroke"
  />
</mx:Application>

The executing SWF file for the previous example is shown below:

Defining strokes for LineSeries and AreaSeries

Some chart series have more than one stroke-related style property. For LineSeries, you use the stroke style property to define a style for the chart item's renderer. You use thelineStroke property to define the stroke of the actual line segments.

The following example creates a thick blue line for the LineChart control's line segments, with large red boxes at each data point, which use the CrossItemRenderer object as their renderer:

<?xml version="1.0"?>
<!-- charts/LineSeriesStrokes.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, Amount:450},
        {Month:"Feb", Profit:1000, Expenses:200, Amount:600},
        {Month:"Mar", Profit:1500, Expenses:500, Amount:300}
     ]);
  ]]></mx:Script>
  <mx:Panel title="Line Chart">
     <mx:LineChart id="myChart" 
        dataProvider="{expenses}"
        showDataTips="true"
     >
        <mx:horizontalAxis>
           <mx:CategoryAxis 
                dataProvider="{expenses}" 
                categoryField="Month"
           />
        </mx:horizontalAxis>
        <mx:series>
           <mx:LineSeries 
            yField="Profit" 
            displayName="Profit"
           >
            <mx:itemRenderer>
                <mx:Component>
                    <mx:CrossItemRenderer 
                        scaleX="1.5" 
                        scaleY="1.5"
                    />
                </mx:Component>
            </mx:itemRenderer>
            <mx:fill>
                <mx:SolidColor 
                    color="0x0000FF"
                />
            </mx:fill>
            <mx:stroke>
                <mx:Stroke 
                    color="0xFF0066" 
                    alpha="1"
                />
            </mx:stroke>
            <mx:lineStroke>
                <mx:Stroke 
                    color="0x33FFFF" 
                    weight="5" 
                    alpha=".8"
                />
            </mx:lineStroke>
           </mx:LineSeries>
           <mx:LineSeries 
                yField="Expenses" 
                displayName="Expenses"
           />
        </mx:series>
     </mx:LineChart>
     <mx:Legend dataProvider="{myChart}"/>
  </mx:Panel>
</mx:Application>

The executing SWF file for the previous example is shown below:

Similarly, with the AreaSeries class, you use the stroke property to set a style for the chart item's renderer. You use the areaStroke style property to define the stroke of the line that defines the area.

http://livedocs.adobe.com/flex/3/html/help.html?content=charts_formatting_06.html