The Legend control is a subclass of the Tile class. You can use Tile properties and some properties of the Container class to format the Legend control. Also, the Legend control has properties (such as labelPlacement, markerHeight, and markerWidth) that you can use to format its appearance. For information on creating Legend controls, see Using Legend controls.

The following table describes the Legend control properties:

The following example sets styles by using CSS on the Legend control:

<?xml version="1.0"?>
<!-- charts/FormattedLegend.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

  <mx:Style>
     Legend {
        labelPlacement:left;
        markerHeight:30;
        markerWidth:30;
     }
  </mx:Style>

  <mx:Script><![CDATA[
     import mx.collections.ArrayCollection;
     [Bindable]
     public var expenses:ArrayCollection = new ArrayCollection([
        {Expense:"Taxes", Amount:2000, Cost:321, Discount:131},
        {Expense:"Rent", Amount:1000, Cost:95, Discount:313},
        {Expense:"Bills", Amount:100, Cost:478, Discount:841}
     ]);
  ]]></mx:Script>

  <mx:Panel title="Bar Chart with Legend">
     <mx:BarChart id="myChart" dataProvider="{expenses}" showDataTips="true">
        <mx:verticalAxis>
           <mx:CategoryAxis 
                dataProvider="{expenses}" 
                categoryField="Expense"
           />
        </mx:verticalAxis>
        <mx:series>
           <mx:BarSeries 
                xField="Amount" 
                displayName="Amount (in $USD)"
           />
           <mx:BarSeries 
                xField="Cost" 
                displayName="Cost (in $USD)"
           />
           <mx:BarSeries 
                xField="Discount" 
                displayName="Discount (in $USD)"
           />
        </mx:series>
     </mx:BarChart>
     <mx:Legend dataProvider="{myChart}"/>
  </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:

You can also change the appearance of the lines on the LegendItem object's marker. You do this with the stroke property or the legendMarkerRenderer property. For more information, see Using strokes with chart controls.

You can place a Legend control anywhere in your application, as long as the control has access to the scope of the chart's data. You can place the Legend control in your application without a container, inside the same container as the chart, or in its own container, such as a Panel container. The latter technique gives the Legend control a border and title bar, and lets you use the title attribute of the Panel to create a title for the Legend control, as the following example shows:

<?xml version="1.0"?>
<!-- charts/LegendInPanel.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

  <mx:Script>
     import mx.collections.ArrayCollection;
     [Bindable]
     public var expenses:ArrayCollection = new ArrayCollection([
        {Expense:"Taxes", Amount:2000, Cost:321, Discount:131},
        {Expense:"Rent", Amount:1000, Cost:95, Discount:313},
        {Expense:"Bills", Amount:100, Cost:478, Discount:841}
     ]);
  </mx:Script>

  <mx:Panel title="Bar Chart with Legend in Panel">
     <mx:BarChart id="myChart" dataProvider="{expenses}" showDataTips="true">
        <mx:verticalAxis>
           <mx:CategoryAxis
                dataProvider="{expenses}" 
                categoryField="Expense"
           />
        </mx:verticalAxis>
        <mx:series>
           <mx:BarSeries 
                xField="Amount" 
                displayName="Amount (in $USD)"
           />
           <mx:BarSeries 
                xField="Cost" 
                displayName="Cost (in $USD)"
           />
           <mx:BarSeries 
                xField="Discount" 
                displayName="Discount (in $USD)"
           />
        </mx:series>
     </mx:BarChart>
     <mx:Panel title="Legend">
        <mx:Legend dataProvider="{myChart}"/>
     </mx:Panel>
  </mx:Panel>

</mx:Application>
The executing SWF file for the previous example is shown below:

Setting the direction of legends

The direction property is a commonly used property that is inherited from the Tile container. This property of the <mx:Legend> tag causes the LegendItem objects to line up horizontally or vertically. The default value of direction is vertical; when you use this value, Flex stacks the LegendItem objects one on top of the other.

The following example sets the direction property to horizontal:

<?xml version="1.0"?>
<!-- charts/HorizontalLegend.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor="white">
  <mx:Script><![CDATA[
     import mx.collections.ArrayCollection;
     [Bindable]
     public var expenses:ArrayCollection = new ArrayCollection([
        {Expense:"Taxes", Amount:2000, Cost:321, Discount:131},
        {Expense:"Rent", Amount:1000, Cost:95, Discount:313},
        {Expense:"Bills", Amount:100, Cost:478, Discount:841}
     ]);
  ]]></mx:Script>

  <mx:Panel title="Bar Chart with Legend">
     <mx:BarChart id="myChart" dataProvider="{expenses}" showDataTips="true">
        <mx:verticalAxis>
           <mx:CategoryAxis 
                dataProvider="{expenses}" 
                categoryField="Expense"
           />
        </mx:verticalAxis>
        <mx:series>
           <mx:BarSeries 
                xField="Amount" 
                displayName="Amount (in $USD)"
           />
           <mx:BarSeries 
                xField="Cost" 
                displayName="Cost (in $USD)"
           />
           <mx:BarSeries 
                xField="Discount" 
                displayName="Discount (in $USD)"
           />
        </mx:series>
     </mx:BarChart>
     <mx:Legend 
        dataProvider="{myChart}" 
        direction="horizontal"
     />
  </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:

The following example shows the Legend with the direction property set to horizontal:

Formatting the legend markers

You can define the appearance of the legend markers by using a programmatic renderer class. Flex includes several default renderer classes that you can use for legend markers.

You can change the renderer of the LegendItem object from the default to one of the ChartItem renderers by using the series' legendMarkerRenderer style property. This property specifies the class to use when rendering the marker in all associated legends.

The following example sets the legend marker of all three series to the DiamondItemRenderer class:

<?xml version="1.0"?>
<!-- charts/CustomLegendRenderer.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:"January", Profit:2000, Expenses:1500, Amount:450},
        {Month:"February", Profit:1000, Expenses:200, Amount:600},
        {Month:"March", Profit:1500, Expenses:500, Amount:300},
        {Month:"April", Profit:500, Expenses:300, Amount:500},
        {Month:"May", Profit:1000, Expenses:450, Amount:250},
        {Month:"June", Profit:2000, Expenses:500, Amount:700}
     ]);
  ]]></mx:Script>
  <mx:Panel title="Plot Chart">
     <mx:PlotChart id="myChart" dataProvider="{expenses}"
     showDataTips="true">
        <mx:series>
           <!--
                Each series uses the default renderer for
                the ChartItems, but uses the same renderer
                for legend markers.
           -->
           <mx:PlotSeries
                xField="Expenses"
                yField="Profit"
                displayName="Plot 1"
                legendMarkerRenderer=
                "mx.charts.renderers.DiamondItemRenderer"
           />

           <mx:PlotSeries
                xField="Amount"
                yField="Expenses"
                displayName="Plot 2"
                legendMarkerRenderer=
                "mx.charts.renderers.DiamondItemRenderer"
           />

           <mx:PlotSeries
                xField="Profit"
                yField="Amount"
                displayName="Plot 3"
                legendMarkerRenderer=
                "mx.charts.renderers.DiamondItemRenderer"
           />
        </mx:series>
     </mx:PlotChart>
     <mx:Legend dataProvider="{myChart}"/>
  </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below:

If you do not explicitly set the legendMarkerRenderer property, the property uses the default class that the series' itemRenderer style property specifies. Each series has a default renderer that is used if neither of these style properties is specified.

You can create your own custom legend marker class. Classes used as legend markers must implement the IFlexDisplayObject interface and, optionally, the ISimpleStyleClient and IDataRenderer interfaces.

For more information on available renderer classes, see Skinning ChartItem objects.