Skinning ChartItem objects -- Flex 2.01

A ChartItem object represents a data point in a series. There is one ChartItem instance for each item in the series's data provider. ChartItem objects contain details about the data for the data point as well as the renderer (or, skin) to use when rendering that data point in the series. The ChartItem renderers define objects such as the icon that represents a data point in a PlotChart control or the box that makes up a bar in a BarChart control.

Each series has a default renderer that Flex uses to draw that series's ChartItem objects. You can specify a new renderer to use with the series's itemRenderer style property. This property points to a class that defines the appearance of the ChartItem object.

You can use existing classes to change the default renderers of chart items. The DiamondItemRenderer class is the default renderer for ChartItem objects in a data series in a PlotChart control. The following example uses the default DiamondItemRenderer class for the first data series. The second series uses the CircleItemRenderer class, which draws a circle to represent the data points in that series. The third series uses the CrossItemRenderer class, which draws a cross shape to represent the data points in that series.

<?xml version="1.0"?>
<!-- charts/PlotRenderers.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script><![CDATA[
     import mx.collections.ArrayCollection;
     [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}
     ]);
  ]]></mx:Script>
  <mx:Panel title="Plot Chart">
     <mx:PlotChart id="myChart" 
        dataProvider="{expenses}"
        showDataTips="true"
     >
        <mx:series>
           <!-- First series uses default renderer. -->
           <mx:PlotSeries 
                xField="Expenses" 
                yField="Profit"
                displayName="Plot 1"
           />

           <!-- Second series uses DiamondItemRenderer. -->
           <mx:PlotSeries 
                xField="Amount" 
                yField="Expenses"
                displayName="Plot 2" 
                itemRenderer="mx.charts.renderers.CircleItemRenderer"
           />

           <!-- Third series uses CrossItemRenderer. -->
           <mx:PlotSeries 
                xField="Profit" 
                yField="Amount" 
                displayName="Plot 3" 
                itemRenderer="mx.charts.renderers.CrossItemRenderer"
           />
        </mx:series>
     </mx:PlotChart>
     <mx:Legend dataProvider="{myChart}"/>
  </mx:Panel>
</mx:Application>

Skinning ChartItem objects

Subtopics