Flex Examples
The following example shows how you can set the label placement on a Flex Legend control by setting the labelPlacement style.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/27/setting-the-label-placement-on-a-legend-control-in-flex/ -->
<mx:Application name="Legend_labelPlacement_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:XMLListCollection id="dp">
<mx:source>
<mx:XMLList>
<product label="Product 1" data="3" />
<product label="Product 2" data="1" />
<product label="Product 3" data="4" />
<product label="Product 4" data="1" />
<product label="Product 5" data="5" />
<product label="Product 6" data="9" />
</mx:XMLList>
</mx:source>
</mx:XMLListCollection>
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="direction:">
<mx:ComboBox id="directionCB">
<mx:dataProvider>
<mx:Array>
<mx:Object label="horizontal" />
<mx:Object label="vertical" />
</mx:Array>
</mx:dataProvider>
</mx:ComboBox>
</mx:FormItem>
<mx:FormItem label="labelPlacement:">
<mx:ComboBox id="labelPlacementCB" selectedIndex="1">
<mx:dataProvider>
<mx:Array>
<mx:Object label="left" />
<mx:Object label="right" />
</mx:Array>
</mx:dataProvider>
</mx:ComboBox>
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:Panel styleName="opaquePanel"
width="100%"
height="100%">
<mx:PieChart id="pieChart"
dataProvider="{dp}"
height="100%"
width="100%">
<mx:series>
<mx:PieSeries id="pieSeries"
field="@data"
nameField="@label"
filters="[]" />
</mx:series>
</mx:PieChart>
<mx:ControlBar width="100%">
<mx:Legend dataProvider="{pieChart}"
direction="{directionCB.value}"
labelPlacement="{labelPlacementCB.value}"
horizontalGap="100"
width="100%" />
</mx:ControlBar>
</mx:Panel>
</mx:Application>
View source is enabled in the following example.
You can also set the labelPlacement style in an external .CSS file or <mx:Style /> block, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/27/setting-the-label-placement-on-a-legend-control-in-flex/ -->
<mx:Application name="Legend_labelPlacement_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
Legend {
labelPlacement: left;
}
</mx:Style>
<mx:XMLListCollection id="dp">
<mx:source>
<mx:XMLList>
<product label="Product 1" data="3" />
<product label="Product 2" data="1" />
<product label="Product 3" data="4" />
<product label="Product 4" data="1" />
<product label="Product 5" data="5" />
<product label="Product 6" data="9" />
</mx:XMLList>
</mx:source>
</mx:XMLListCollection>
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="direction:">
<mx:ComboBox id="directionCB">
<mx:dataProvider>
<mx:Array>
<mx:Object label="horizontal" />
<mx:Object label="vertical" />
</mx:Array>
</mx:dataProvider>
</mx:ComboBox>
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:Panel styleName="opaquePanel"
width="100%"
height="100%">
<mx:PieChart id="pieChart"
dataProvider="{dp}"
height="100%"
width="100%">
<mx:series>
<mx:PieSeries id="pieSeries"
field="@data"
nameField="@label"
filters="[]" />
</mx:series>
</mx:PieChart>
<mx:ControlBar width="100%">
<mx:Legend dataProvider="{pieChart}"
direction="{directionCB.value}"
horizontalGap="100"
width="100%" />
</mx:ControlBar>
</mx:Panel>
</mx:Application>
Or, you can set the labelPlacement style using ActionScript, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/27/setting-the-label-placement-on-a-legend-control-in-flex/ -->
<mx:Application name="Legend_labelPlacement_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.events.ListEvent;
private function directionCB_change(evt:ListEvent):void {
legend.direction = directionCB.value.toString();
}
private function labelPlacementCB_change(evt:ListEvent):void {
legend.setStyle("labelPlacement", labelPlacementCB.value);
}
]]>
</mx:Script>
<mx:XMLListCollection id="dp">
<mx:source>
<mx:XMLList>
<product label="Product 1" data="3" />
<product label="Product 2" data="1" />
<product label="Product 3" data="4" />
<product label="Product 4" data="1" />
<product label="Product 5" data="5" />
<product label="Product 6" data="9" />
</mx:XMLList>
</mx:source>
</mx:XMLListCollection>
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="direction:">
<mx:ComboBox id="directionCB"
change="directionCB_change(event);">
<mx:dataProvider>
<mx:Array>
<mx:Object label="horizontal" />
<mx:Object label="vertical" />
</mx:Array>
</mx:dataProvider>
</mx:ComboBox>
</mx:FormItem>
<mx:FormItem label="labelPlacement:">
<mx:ComboBox id="labelPlacementCB"
selectedIndex="1"
change="labelPlacementCB_change(event);">
<mx:dataProvider>
<mx:Array>
<mx:Object label="left" />
<mx:Object label="right" />
</mx:Array>
</mx:dataProvider>
</mx:ComboBox>
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:Panel styleName="opaquePanel"
width="100%"
height="100%">
<mx:PieChart id="pieChart"
dataProvider="{dp}"
height="100%"
width="100%">
<mx:series>
<mx:PieSeries id="pieSeries"
field="@data"
nameField="@label"
filters="[]" />
</mx:series>
</mx:PieChart>
<mx:ControlBar width="100%">
<mx:Legend id="legend"
dataProvider="{pieChart}"
direction="horizontal"
horizontalGap="100"
width="100%" />
</mx:ControlBar>
</mx:Panel>
</mx:Application>
Due to popular demand, here is the “same” example in a more ActionScript friendly format:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/27/setting-the-label-placement-on-a-legend-control-in-flex/ -->
<mx:Application name="Legend_labelPlacement_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
initialize="init();">
<mx:Script>
<![CDATA[
import mx.charts.Legend;
import mx.charts.PieChart;
import mx.charts.series.PieSeries;
import mx.collections.XMLListCollection;
import mx.containers.ApplicationControlBar;
import mx.containers.ControlBar;
import mx.containers.Form;
import mx.containers.FormItem;
import mx.containers.Panel;
import mx.containers.TileDirection;
import mx.controls.ButtonLabelPlacement;
import mx.controls.ComboBox;
import mx.events.ListEvent;
private var directionCB:ComboBox;
private var dp:XMLListCollection;
private var labelPlacementCB:ComboBox;
private var legend:Legend;
private var panel:Panel;
private var pieChart:PieChart;
private var pieSeries:PieSeries;
private function init():void {
var data:XML = <products>
<product label="Product 1" data="3" />
<product label="Product 2" data="1" />
<product label="Product 3" data="4" />
<product label="Product 4" data="1" />
<product label="Product 5" data="5" />
<product label="Product 6" data="9" />
</products>;
dp = new XMLListCollection(data.product);
var directionDP:Array = [];
directionDP.push({label:TileDirection.HORIZONTAL});
directionDP.push({label:TileDirection.VERTICAL});
directionCB = new ComboBox();
directionCB.dataProvider = directionDP;
directionCB.addEventListener(ListEvent.CHANGE,
directionCB_change);
var labelPlacementDP:Array = [];
labelPlacementDP.push({label:ButtonLabelPlacement.LEFT});
labelPlacementDP.push({label:ButtonLabelPlacement.RIGHT});
labelPlacementCB = new ComboBox();
labelPlacementCB.dataProvider = labelPlacementDP;
labelPlacementCB.selectedIndex = 1;
labelPlacementCB.addEventListener(ListEvent.CHANGE,
labelPlacementCB_change);
var formItem1:FormItem = new FormItem();
formItem1.label = "direction:";
formItem1.addChild(directionCB);
var formItem2:FormItem = new FormItem();
formItem2.label = "labelPlacement:";
formItem2.addChild(labelPlacementCB);
var form:Form = new Form();
form.styleName = "plain";
form.addChild(formItem1);
form.addChild(formItem2);
var appControlBar:ApplicationControlBar;
appControlBar = new ApplicationControlBar();
appControlBar.dock = true;
appControlBar.addChild(form);
addChildAt(appControlBar, 0);
pieSeries = new PieSeries();
pieSeries.field = "@data";
pieSeries.nameField = "@label";
pieSeries.filters = [];
pieChart = new PieChart();
pieChart.dataProvider = dp;
pieChart.percentWidth = 100;
pieChart.percentHeight = 100;
pieChart.series = [pieSeries];
legend = new Legend();
legend.dataProvider = pieChart;
legend.direction = TileDirection.HORIZONTAL;
legend.percentWidth = 100;
legend.setStyle("horizontalGap", 100);
var controlBar:ControlBar = new ControlBar();
controlBar.addChild(legend);
panel = new Panel();
panel.styleName = "opaquePanel";
panel.percentWidth = 100;
panel.percentHeight = 100;
panel.addChild(pieChart);
panel.addChild(controlBar);
addChild(panel);
}
private function directionCB_change(evt:ListEvent):void {
legend.direction = directionCB.value.toString();
}
private function labelPlacementCB_change(evt:ListEvent):void {
legend.setStyle("labelPlacement", labelPlacementCB.value);
}
]]>
</mx:Script>
</mx:Application>
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
You can also set the label placement to top/bottom, but I noticed a small bug with changing the
labelPlacementto “top” or “bottom” at run-time using ActionScript (it works fine if you set the style to at compile-time).I filed a bug report at http://bugs.adobe.com/jira/browse/FLEXDMV-1906 for anybody that cares to subscribe or add any other potential workarounds they find.
Peter