Chart legend too wide when using horizontal layout

Question

I am using a flex chart with about 15 series on it. I've set
the legend direction variable to "horizontal". However since the
panel width which contains the chart is fixed, the legend sprawls
out to the right instead of going "wrapping around" nicely to stay
within the panel. As a result, you can't read the whole legend when
looking at the chart. The chart itself stays the proper width, but
the legend is too wide and can only be seen via using the scrollbar
to move horizontally. How can that be fixed?

Answer 1

Solerous, you must create a custom legend. Here's an example
that uses a grid to lay out the individual grid items. If you have
a variable number of series, then you can probably come up with
better logic for laying out the legend, but this should help get
you going.
hth,
matt horn
flex docs
<?xml version="1.0"?>
<!-- charts/CustomLegendInActionScript.mxml -->
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
backgroundColor="white" creationComplete="init()">
<mx:Script><![CDATA[
import mx.containers.GridItem;
import mx.containers.GridRow;
import mx.graphics.SolidColor;
import mx.graphics.IFill;
import mx.charts.LegendItem;
import mx.charts.Legend;
import mx.collections.ArrayCollection;
[Bindable]
public var expenses:ArrayCollection = new ArrayCollection([
{Expense:"Taxes", April:2000, May:321, June:131, July:1100,
August:200, September:1400, October:42},
{Expense:"Rent", April:1000, May:95, June:313, July:600,
August:400, September:200, October:52},
{Expense:"Taxes", April:2000, May:321, June:131, July:90,
August:500, September:900, October:300},
{Expense:"Bills", April:100, May:478, June:841, July:400,
August:600, September:1100, October:150}
private function init():void {
for (var i:int = 0; i < myChart.series.length; i++) {
var li:LegendItem = new LegendItem();
li.label = myChart.series
.displayName;
var sc:SolidColor = myChart.series.getStyle("fill");
li.setStyle("fill", sc);
var gi:GridItem = new GridItem();
if (i < 3) {
// First row
gi.addChild(li);
gr1.addChild(gi);
} else if (i >= 3 && i < 6) {
// Second row
gi.addChild(li);
gr2.addChild(gi);
} else if (i >= 6) {
// Third row
gi.addChild(li);
gr3.addChild(gi);
]]></mx:Script>
<mx:Panel title="Bar Chart with Legend" width="500"
height="600">
<mx:BarChart id="myChart" dataProvider="{expenses}"
height="400" showDataTips="true">
<mx:verticalAxis>
<mx:CategoryAxis
dataProvider="{expenses}"
categoryField="Expense"
/>
</mx:verticalAxis>
<mx:series>
<mx:BarSeries xField="April" displayName="April (in
$USD)"/>
<mx:BarSeries
xField="May"
displayName="May (in $USD)"
/>
<mx:BarSeries
xField="June"
displayName="June (in $USD)"
/>
<mx:BarSeries
xField="July"
displayName="July (in $USD)"
/>
<mx:BarSeries
xField="August"
displayName="August (in $USD)"
/>
<mx:BarSeries
xField="September"
displayName="September (in $USD)"
/>
<mx:BarSeries
xField="October"
displayName="October (in $USD)"
/>
</mx:series>
</mx:BarChart>
<mx:Grid id="myGrid">
<mx:GridRow id="gr1">
</mx:GridRow>
<mx:GridRow id="gr2">
</mx:GridRow>
<mx:GridRow id="gr3">
</mx:GridRow>
</mx:Grid>
</mx:Panel>
</mx:Application>