<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:mx="library://ns.adobe.com/flex/mx" 
                autoDrawBackground="true">
    
    <fx:Script>
        <![CDATA[
            public static var dataTips:Array = [];
            
            public function init():void {
                DataTipRenderer.dataTips.push(this);
            }
        ]]>
    </fx:Script>
    
    <fx:Declarations>
        <mx:CurrencyFormatter id="cur" useThousandsSeparator="true" precision="2" />
    </fx:Declarations>

    
    <s:Group>
        
        <s:Rect width="100%" height="100%">
            <s:filters>
                <s:DropShadowFilter alpha=".3" color="0" distance="0" blurX="15" blurY="15" />
            </s:filters>
            <s:fill>
                <s:LinearGradient rotation="90">
                    <s:entries>
                        <s:GradientEntry color="#305B86"/>
                        <s:GradientEntry color="#4A76B7"/>
                    </s:entries>
                </s:LinearGradient>
            </s:fill>
        </s:Rect>
        
        
        <s:Rect width="100%" height="100%">
            <s:stroke>
                <s:SolidColorStroke weight="1" color="#FFFFFF"/>
            </s:stroke>
        </s:Rect>
        
        <s:VGroup paddingTop="12" gap="12"
                  paddingBottom="12"
                  paddingLeft="12"
                  paddingRight="12">
            
            <s:HGroup>
                <s:Label text="Age: {data.chartItem.xValue}" color="0xFFFFFF" fontSize="14" fontFamily="allerBold"/>
            </s:HGroup>
            
            <s:HGroup>
                <s:Label text="Value: {cur.format(data.chartItem.yValue)}" color="0xFFFFFF" fontSize="14" fontFamily="allerBold"/>
            </s:HGroup>
            
        </s:VGroup>
        
    </s:Group>
    
</s:ItemRenderer>