Displaying an item renderer balloon above the data point

I'm using a custom item renderer for an AreaChart:

<mx:AreaChart id="numParticipants" left="10" right="10" top="10" 
    bottom="10" color="#8D8D8D"
dataProvider="{UsersModel.graphData.data_points.point}" dataTipMode="multiple"
dataTipRenderer="tooltip.ChartTooltip" fontSize="9" mouseSensitivity="10"
    seriesFilters="[]" showDataTips="true" >

inside it's data set:

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="180" height="42">

<mx:Style source="css/style.css"/>
<mx:Script>
    <![CDATA[
        import models.UsersModel;

        import mx.charts.HitData;
        import mx.formatters.DateFormatter;

        override public function set data(value:Object):void
      开发者_如何学Python  {

I'm displaying my text.

However, I want the balloon to be exactly above the data point. I tried to change the (x,y) coordinates but it doesn't seem to change.

How can I move this balloon around to a desired location?

I'm afraid that using your own custom location is not something within the scope of the datatip (I know, stupid right?). It's meant to be used just as a set and forget it kind of this.

If you want, you can create your own custom data tips by simply using the popup manager when you hover over your data. You'll have a lot more flexibility in a lot of other aspects as well, but of course, this means more code for you to create and test.

EDIT: Another thing came to mind, and that would be to extend the chart itself which controls the datatips and adding your own functionality of where/how to move the datatip. I found this post on how to change the behavior of line charts.

Just stumbled on a solution, so I'm posting for future generations. Simply override the move function of the tool tip renderer:

override public function move(x:Number, y:Number):void
{
    super.move(x+10, y+10); // just sample 
}

HTH

Probably the quickest (but not necesarily a good practice) is to use a UIComponent as the base Class for your dataTipRenderer (UIComponent doesn't measure or lay out anything). Measure and lay out everything in updateDisplayList, and move everything up and to the left within the UIComponent until it is where you want it relative to the data point. Leave your measure() method empty (so the measured size is 0, 0), and Flex will put the top left corner of the UIComponent (that you've moved things to be above and to the left of) above your data point.