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.

1.	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.
2.	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>.
3.	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.
4.	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.