I am trying to draw a line on cartesiandatacanvas. While I am able to draw lines easily using the canvas.moveTo and canvas.lineTo methods, I cannot provide a tooltip to the line if I use that functionality. I have tried creating a label(when ever I draw a line) and adding a tooltip to it but since I show the lines in a 10*10 grid both vertical and horizontal there is a overlap and it is confusing.

So now I am trying to create a line object that extends shape or UIComponent. I cannot add this object to canvas using the addChild method it does not work. The addDataChild method works but it messes with the positioning of the line. Can someone help with a solution to this.

Simply put I want to draw lines on a datacanvas and add tooltips to them.

Here is my code for the line object:

package model
{
    import flash.display.CapsStyle;
    import flash.display.JointStyle;
    import flash.display.LineScaleMode;

    import mx.core.UIComponent;

    public class Line extends UIComponent
    {
        public var x1:Number;
        public var x2:Number;
        public var y1:Number;
        public var y2:Number;
        public var color:Number;


        public function Line(x1:Number, 
                    y1:Number, 
                    x2:Number, 
                    y2:Number,color:Number)
        {
            super();
            this.graphics.lineStyle(4, 
                            color, 
                            1, 
                            true, 
                            LineScaleMode.NORMAL, 
                            CapsStyle.ROUND, 
                            JointStyle.MITER, 
                            1
                        );
            this.graphics.moveTo(x1,y1);
            this.graphics.lineTo(x2,y2);
        }
    }
}

Here is a sample MXML that has a canvas and tries to use the line object above:

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="init()">
<mx:Script>
    <![CDATA[

        import model.Line;
    import mx.charts.chartClasses.CartesianCanvasValue;



    private var accidImage:Image = new Image();

        public function init():void
        {
            var line:Line = new Line(10,10,40,40,0XFF0000);
//          canvas.addChild(line); *Does not Work*
            canvas.addDataChild(line,10,10,null,null,null,null); 
        }
    ]]>
</mx:Script>

    <mx:Panel x="60" y="53" width="517" height="472" layout="absolute">
        <mx:PlotChart x="48" y="10" id="plotchart1">
            <mx:series>
                <mx:PlotSeries displayName="Series 1" yField=""/>
            </mx:series>
            <mx:annotationElements>
            <mx:CartesianDataCanvas id="canvas" includeInRanges="true"/>
        </mx:annotationElements>
         <mx:verticalAxis>


           <mx:LinearAxis  id="axis11" minimum="0" maximum="100" interval="10" padding="10"/>
        </mx:verticalAxis>
            <mx:horizontalAxis>

           <mx:LinearAxis  id="axis21" minimum="0" maximum="100" interval="10" padding="10"/>
        </mx:horizontalAxis>
        </mx:PlotChart>
        <mx:Legend dataProvider="{plotchart1}"/>
    </mx:Panel>

</mx:WindowedApplication>