Adding Legends to the Charts

Adding a legend to a Flex chart is incredibly easy. The <mx:Legend> tag requires only one argument, dataProvider, which is bound to the chart. There are several other attributes you can use to further customize the legend, a couple of the commonly used ones are as follows:

  • labelPlacement Just like the labelPlacement of a check box or radio button, this indicates if the label should be left, right, top, or bottom as compared with the colored square that identifies the data.

  • direction Indicates if the items in the legend should be laid out vertically or horizontally.


Open ComparisonChart.mxml from your flexGrocer/views/dashboard directory.

Alternately, you can open ComparisonChart_labelFunctions.mxml from the intermediate directory and save it as ComparisonChart.mxml in your flexGrocer/views/dashboard directory.


Inside the <mx:VBox>, before the <mx:ColumnChart> tag, add an <mx:Legend> tag with the direction set to horizontal and the dataProvider bound to chart.

<mx:VBox>   <mx:Legend direction="horizontal" dataProvider="{chart}"/>   <mx:ColumnChart      dataProvider="{dp}"     width="100%" height="100%">   ... </mx:VBox> 

This should create a legend placed horizontally which appears before the chart inside the <mx:VBox>.


Find the <mx:ColumnSeries> tag for the GROSS column. Add a displayName attribute with the value Gross. Find the <mx:ColumnSeries> tag for the NET column. Add a displayName attribute with the value of Net.

<mx:series>   <mx:ColumnSeries yField="GROSS" displayName="Gross" >   </mx:ColumnSeries>   <mx:ColumnSeries yField="NET" displayName="Net" >   </mx:ColumnSeries> </mx:series> 

The displayName indicates what should be shown in the legend.


Save and run the application.

You should see a legend appear above the comparison chart. The current file should resemble ComparisonChart_legend.mxml in the intermediate directory.

Adobe Flex 2.Training from the Source
Adobe Flex 2: Training from the Source
ISBN: 032142316X
EAN: 2147483647
Year: 2006
Pages: 225 © 2008-2017.
If you may any questions please contact us: