How to show legends on multiple lines in flex

Question

I have a Line chart with 12 Legends. Hence the are getting truncated at the end instead of wrapping around dude to lack of space. Can anyone suggest me a method to show the remaining legends on next line. e.g 6 legends on each ln

You need to subclass LegendItem to allow this. I don't have time right now to try to dig out the old code I have somewhere that did this, but if you haven't got it yourself by tonight, post a comment and I will. In the meantime, this may help http://blogs.adobe.com/flexdoc/2008/07/customized_legend_layout.html — Amy Blankenship, Oct 28 '11 at 18:55

score 0 · Answer 1 · answered Apr 27 '14 at 15:09

If chart id is 'myChart' and series id is 'chartSer' then:

private function init():void {
  this.myChart.addEventListener(FlexEvent.UPDATE_COMPLETE, updEvHandler);
}

private function updEvHandler(ev:Event):void{
  chartSer.displayName = "Line 1"+String.fromCharCode(13)+"Line 2";
}

score 0 · Answer 2 · answered Nov 05 '11 at 22:09

You can also create a custom Legend with LegendItems and LegendMarkerRenderer as well. That way you can place them anywhere you want, and with whatever layout you want. You can then enclose the Legend in a VGroup, or HGroup or a Group with TileLayout, or whatever, place each one absolutely. e.g.

<mx:Legend>
                    <mx:LegendItem label="January" fontWeight="bold">

                        <mx:fill>
                            <mx:SolidColor color="#0FFF3C" alpha=".9"/>
                        </mx:fill>
                        <mx:stroke>
                            <mx:SolidColorStroke color="#0FFF3C" weight="1"/>
                        </mx:stroke>
                    </mx:LegendItem>
                    <mx:LegendItem label="February" fontWeight="bold">
                        <mx:legendMarkerRenderer>
                            <fx:Component>
                                <mx:CircleItemRenderer/>
                            </fx:Component>
                        </mx:legendMarkerRenderer>
                        <mx:fill>
                            <mx:SolidColor color="#FF8F35" alpha=".8"/>
                        </mx:fill>
                        <mx:stroke>
                            <mx:SolidColorStroke color="#35ABFF" weight="3"/>
                        </mx:stroke>
                    </mx:LegendItem>
                </mx:Legend>

How to show legends on multiple lines in flex

2 Answers2