Chart controls accept many kinds of user interactions, from moving the mouse over a data point to clicking or double-clicking on that data point. You can create an event handler for each of these interactions and use the Event object in that handler to access the data related to that interaction. For example, if a user clicks on a column in a ColumnChart control, you can access that column's data in the click event handler of that chart.

The chart controls support the mouse events that are inherited from the UIComponent class: mouseMove, mouseOver, mouseUp, mouseDown, and mouseOut. These events are of type MouseEvent. In addition, the base class for all chart controls, ChartBase, adds support for the the ChartEvent and ChartItemEvent events.

The ChartItemEvent class defines events that are specific to the chart components, such as when the user clicks a data item in a chart. The ChartEvent class defines events that occur when the user clicks or double-clicks on a chart control, but not on a chart item in that chart control.

The following table describes the ChartEvent event types:

The following table describes the ChartItemEvent event types:

In addition to the ChartEvent and ChartItemEvent classes, there is also the LegendMouseEvent. This class defines events that are broadcast when the user clicks on legend items or mouses over them.

About chart events

Chart events are triggered when the user clicks or double-clicks the mouse button while the mouse pointer is over a chart control, but not over a chart item in that chart control. These events are dispatched only if the hit data set is empty.

Chart events are of type ChartEvent. Because ChartEvent events are part of the charts package, and not part of the events package, you must import the appropriate classes in the mx.charts.events package to use a ChartEvent event.

The following example logs a ChartEvent when you click or double-click the chart control, but only if you are not over a chart item or within it's range, as determined by its mouseSensitivity property.

<?xml version="1.0"?>
<!-- charts/BasicChartEvent.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script><![CDATA[
     import mx.collections.ArrayCollection;
     import mx.charts.events.ChartEvent;
     [Bindable]
     public var expenses:ArrayCollection = new ArrayCollection([
        {Month:"January", Profit:2000, Expenses:1500, Amount:450},
        {Month:"February", Profit:1000, Expenses:200, Amount:600},
        {Month:"March", Profit:1500, Expenses:500, Amount:300},
        {Month:"April", Profit:500, Expenses:300, Amount:500},
        {Month:"May", Profit:1000, Expenses:450, Amount:250},
        {Month:"June", Profit:2000, Expenses:500, Amount:700}
     ]);

    private function chartEventHandler(event:ChartEvent):void {
        /*
        The ChartEvent will only be dispatched if the mouse is _not_ over a 
        chart item or if it is outside of the range defined by the 
        mouseSensitivity property.
        */
        ta1.text += "Event of type " + event.type + " was triggered.\n";        
    }

  ]]></mx:Script>
  
  <mx:Style>
    Panel {
        paddingLeft:5;
        paddingRight:5;
        paddingTop:5;
        paddingBottom:5;
    }
  </mx:Style>
  
  <mx:Panel title="Chart click events">
     <mx:HBox>
         <mx:PlotChart id="myChart" 
            dataProvider="{expenses}" 
            showDataTips="true"
            mouseSensitivity="10"
            doubleClickEnabled="true"
            chartClick="chartEventHandler(event)"
            chartDoubleClick="chartEventHandler(event)"
        >
            <mx:series>
               <mx:PlotSeries 
                    xField="Expenses" 
                    yField="Profit"
                    displayName="P 1"
               />
               <mx:PlotSeries 
                    xField="Amount" 
                    yField="Expenses"
                    displayName="P 2"
               />
               <mx:PlotSeries 
                    xField="Profit" 
                    yField="Amount" 
                    displayName="P 3"
               />
            </mx:series>
         </mx:PlotChart>
         <mx:TextArea id="ta1" width="150" height="300"/>
       </mx:HBox>
     <mx:Legend dataProvider="{myChart}"/>
  </mx:Panel>

</mx:Application>
The executing SWF file for the previous example is shown below:

About chart data events

Chart data events are triggered only when the user moves the mouse pointer over a data point, whereas UIComponent events are triggered by any mouse interaction with a control.

The chart data events are of type ChartItemEvent. Because ChartItemEvent events are part of the charts package, and not part of the events package, you must import the appropriate classes in the mx.charts.events package to use a ChartItemEvent event.

The following example opens an alert when the user clicks a data point (a column) in the chart:

<?xml version="1.0"?>
<!-- charts/DataPointAlert.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script><![CDATA[
     import mx.controls.Alert;
     import mx.charts.events.ChartItemEvent;
     import mx.collections.ArrayCollection;

     [Bindable]
     public var dataSet:ArrayCollection = new ArrayCollection([
        {Month:"Jan", Expenses:1500},
        {Month:"Feb", Expenses:200},
        {Month:"Mar", Expenses:500}
     ]);

     public function myHandler(e:ChartItemEvent):void {
        Alert.show("Chart data was clicked");
     }

  ]]></mx:Script>
  <mx:Panel title="Clickable Column Chart">
     <mx:ColumnChart id="myChart" 
        itemClick="myHandler(event)"
        dataProvider="{dataSet}"
     >
        <mx:horizontalAxis>
           <mx:CategoryAxis 
                dataProvider="{dataSet}" 
                categoryField="Month"
           />
        </mx:horizontalAxis>
        <mx:series>
           <mx:ColumnSeries yField="Expenses" displayName="Expenses"/>
        </mx:series>
     </mx:ColumnChart>
     <mx:Legend dataProvider="{myChart}"/>
  </mx:Panel>
</mx:Application>
The executing SWF file for the previous example is shown below: