Question

I’ve been working with the flex charting component and I want to embed a custom icon for the marker in the legend. I’ve run into some strange behaviour where if set directly the icon is mirrored and the text is misaligned but if created using the a class factory and the legendMarkerRenderer property the component renders fine. I’ve included a snippet to illustrate the problem below.

Working around this problem may be possible but I’m curious if anyone has an explanation as to what could be going on here.

Additional info: Flex SDK 4.5.0.20967, FlashBuilder 4.5

This is the output of the below snippet:

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark">
    <fx:Script>
    <![CDATA[
        import mx.charts.LegendItem;

        [Embed(source="/resources/GraphResetIcon.png")]
        public static var icon:Class;
    ]]>
    </fx:Script>
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

    <!-- This works fine -->
    <mx:LegendItem legendMarkerRenderer="{new ClassFactory(icon)}" markerAspectRatio="1" 
        labelPlacement="right" label="Texty texty" markerHeight="11" markerWidth="11" />

    <!-- This does not work -->
    <mx:LegendItem marker="{new icon()}" markerAspectRatio="1" labelPlacement="right"     
        label="Texty texty" markerHeight="11" markerWidth="11" />

</s:Application>

Answer 1

Try

<mx:LegendItem marker="{icon}" markerAspectRatio="1" labelPlacement="right"              label="Texty texty" markerHeight="11" markerWidth="11" /> 

Edit:

I dug out my backup hard drive, and here is what works for me

//button icons          
[Embed(source='com/magnoliamultimedia/assets/guess.png')]
private var guessIcon:Class;
[Embed(source='com/magnoliamultimedia/assets/half_guess.png')]
private var halfGuessIcon:Class;
[Embed(source='com/magnoliamultimedia/assets/not_guess.png')]
//bitmapasset for markers
[Bindable]
private var _guessBA:BitmapAsset;
[Bindable]
private var _halfGuessBA:BitmapAsset;
[Bindable]
private var _notGuessBA:BitmapAsset;

///...
private function init():void{
    _guessBA = BitmapAsset(new guessIcon());
    _halfGuessBA = BitmapAsset(new halfGuessIcon());
    _notGuessBA= BitmapAsset(new notGuessIcon());
    _markerHeight = _guessBA.height*.75;
    _markerWidth = _guessBA.width*.75;
    legend.visible = true;
}
//...
<mx:Canvas id="legend" width="{Application.application.width}" height="75" 
    backgroundColor="#FFFFFF" visible="false">
    <mx:constraintColumns>
        <mx:ConstraintColumn id="rowName" width="20%" />
        <mx:ConstraintColumn id="legend1" width="25%" />
        <mx:ConstraintColumn id="legend2" width="25%" />
        <mx:ConstraintColumn id="legend3" width="25%" />
    </mx:constraintColumns>
    <mx:constraintRows>
        <mx:ConstraintRow id="colors" />
        <mx:ConstraintRow id="icons" />
    </mx:constraintRows>
    <!--color legends-->
    <mx:LegendItem label="Colors:" id="colorCol1" visible="false"
            top="colors:10" left="rowName:10" right="legend1:10" fill="{noFill}"
            markerHeight="0" markerWidth="0" />
    <mx:LegendItem label="Correct" id="colorCol2" visible="false"
            top="colors:10" left="legend1:10" right="legend2:10" 
            fill="{greenFill}" stroke="{outline}" 
            markerHeight="{_markerHeight}" markerWidth="{_markerWidth}" />
    <mx:LegendItem label="Wrong" id="colorCol3" visible="false"
            top="colors:10" left="legend2:10" right="legend3:10" 
            fill="{redFill}" stroke="{outline}" 
            markerHeight="{_markerHeight}" markerWidth="{_markerWidth}" />
    <mx:LegendItem label="Not Attempted" id="colorCol4" visible="false"
            top="colors:10" left="legend3:10" 
            fill="{defaultFill}" stroke="{outline}" 
            markerHeight="{_markerHeight}" markerWidth="{_markerWidth}" />
    <mx:HRule id="separator" top="icons:5" left="10" right="10" visible="false" />
        <!--icon legends-->
        <mx:LegendItem label="Icons:" 
            top="icons:10" left="rowName:10" right="legend1" fill="{noFill}" 
            markerHeight="0" markerWidth="0" />
        <mx:LegendItem label="Guess" 
            top="icons:10" left="legend1:10" right="legend2:10" 
            marker="{_guessBA}" markerAspectRatio="1" 
            markerHeight="{_markerHeight}" markerWidth="{_markerWidth}" />
        <mx:LegendItem label="Half Guess" 
            top="icons:10" left="legend2:10" right="legend3:10" 
            marker="{_halfGuessBA}" markerAspectRatio="1" 
            markerHeight="{_markerHeight}" markerWidth="{_markerWidth}" />
        <mx:LegendItem label="Not A Guess" 
            top="icons:10" left="legend3:10" 
            marker="{_notGuessBA}" markerAspectRatio="1" 
            markerHeight="{_markerHeight}" markerWidth="{_markerWidth}" />
</mx:Canvas>
<!--legend colors-->
<mx:SolidColor id="redFill" color="0x990000" />
<mx:SolidColor id="greenFill" color="0x003300" />
<mx:SolidColor id="defaultFill" color="0xE6EEEE" />
<mx:SolidColor id="noFill" color="0xE6EEEE" alpha="0" />
<mx:Stroke id="outline" color="0" weight="1" />

In principle, this is almost the same as what you started out with, but I explicitly cast the newly created Class instance to BitmapAsset.