Vertical Line For Chart

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" borderColor="#818282">
 <mx:Script><![CDATA[
  import mx.controls.Label;
  import mx.charts.series.items.LineSeriesItem;
    import mx.collections.ArrayCollection;
    import mx.charts.series.items.ColumnSeriesItem;
    import mx.charts.ChartItem;


     [Bindable]
     public var profits:ArrayCollection = new ArrayCollection([
        {Month:"Jan", Profit:1300},
        {Month:"Feb", Profit:750},
        {Month:"Mar", Profit:1100},
        {Month:"Apr", Profit:1000},
        {Month:"May", Profit:980},
        {Month:"Jun", Profit:1500},
        {Month:"Jul", Profit:2060},
        {Month:"Aug", Profit:1700},
        {Month:"Sep", Profit:1690},
        {Month:"Oct", Profit:2200},
        {Month:"Nov", Profit:2550},
        {Month:"Dec", Profit:3000}
     ]);
     
     private function connectTwoPoints(month1:String, 
        value1:Number, 
        month2:String, 
        value2:Number
     ):void {
        canvas.clear();
        canvas.lineStyle(4, 
            0xff0000, 
            .75, 
            true, 
            LineScaleMode.NORMAL, 
            CapsStyle.ROUND, 
            JointStyle.MITER, 
            2
        );
        canvas.moveTo(month1, value1);
        canvas.lineTo(month2, value2);
        
        l1.text = "Month: " + month1;
        l2.text = "Profit: " + value1;
        l3.text = "Month: " + month2;
        l4.text = "Profit: " + value2;


        chartHasLine = true;
     }


    private var s1:String = new String();
    private var s2:String = new String();
    private var v1:Number = new Number();
    private var v2:Number = new Number();


    // Set this to true initially so that the chart doesn't
    // draw a line when the first item is clicked.
    private var chartHasLine:Boolean = true;


    private function handleChange(event:Event):void {


        var sci:LineSeriesItem = 
            LineSeriesItem(myChart.selectedChartItem);


        if (chartHasLine) 
        {
            canvas.clear();


            s1 = sci.item.Month;
            v1 = sci.item.Profit;        


            addLabelsToColumn(s1,v1);
    
            chartHasLine = false;
        } else
         {
            s2 = sci.item.Month;
            v2 = sci.item.Profit;


            addLabelsToColumn(s2,v2);
    
            connectTwoPoints(s1, v1, s2, v2);        
        }
    }


    [Bindable]
    public var columnLabel:Label;
    
    private function addLabelsToColumn(s:String, n:Number):void {
        columnLabel = new Label();
        columnLabel.setStyle("fontWeight", "bold");
        columnLabel.setStyle("color", "0x660000");
       columnLabel.text = s + ": " + "$" + n;
        
        // This adds any DisplayObject as child to current canvas.        
        canvas.addDataChild(columnLabel, s, n);
    }


  ]]></mx:Script>
  <mx:Panel title="Vertical Line For Column Chart" x="364" y="30" width="479" verticalScrollPolicy="off" horizontalScrollPolicy="off"  backgroundColor="#FFFFFF" height="563" borderColor="#A4A09C" color="#000000" headerColors="red">
     <mx:LineChart id="myChart" 
        dataProvider="{profits}" 
        selectionMode="single" 
        change="handleChange(event)"
      width="458">
        <mx:annotationElements>
            <mx:CartesianDataCanvas id="canvas" includeInRanges="true"/>
        </mx:annotationElements>


        <mx:horizontalAxis>
           <mx:CategoryAxis 
                dataProvider="{profits}" 
                categoryField="Month"
           />
        </mx:horizontalAxis>


        <mx:series>
           <mx:LineSeries 
                id="series1"
                xField="Month" 
                yField="Profit" 
                displayName="Profit"
                selectable="true"
           />
        </mx:series>
     </mx:LineChart>
     
     <mx:RadioButton id="b1" 
        label="Connect One Points" 
        click="connectTwoPoints('Jan', 1300, 'Jan', 0);"/>
     
    
     <mx:RadioButton id="b0" 
        label="Connect Two Points" 
        click="connectTwoPoints('Jul', 2060, 'Jul', 0);"/>
     <mx:RadioButton id="b2" 
        label="Connect Three Points" 
       click="connectTwoPoints('Sep', 1690, 'Sep', 0);"/>
      <mx:HBox visible="false">
         <mx:VBox>
             <mx:Label text="First Item"/>
             <mx:Label id="l1"/>
             <mx:Label id="l2"/>
         </mx:VBox>


         <mx:VBox >
             <mx:Label text="Second Item"/>
             <mx:Label id="l3"/>
             <mx:Label id="l4"/>
         </mx:VBox>
     </mx:HBox>
  </mx:Panel>

</mx:Application>


DEMO