Example for ColumnChart

ColumnChart.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 <mx:Script>
  <![CDATA[
   import mx.collections.ArrayCollection;
   
   [Bindable]
   private var _chartData:ArrayCollection = new ArrayCollection([
    {Month: "January '03",   Widgets:885202,  Blinkies: 184454,  monthIdx:1  },
    {Month: "February '03",  Widgets:683392,  Blinkies: 945385,  monthIdx:2  },
    {Month: "March '03",   Widgets:638820,  Blinkies: 442383,  monthIdx:3  },
    {Month: "April '03",   Widgets:949932,  Blinkies: 841201,  monthIdx:4  },
    {Month: "May '03",    Widgets:704302,  Blinkies: 587449,  monthIdx:5  },
    {Month: "June'03",    Widgets:704302,  Blinkies: 587449,  monthIdx:6  },
    {Month: "July '03",   Widgets:453552,  Blinkies: 393039,   monthIdx:7  },
    {Month: "August '03",   Widgets:387254,  Blinkies: 746652,  monthIdx:8  },
    {Month: "September '03",  Widgets:537254,  Blinkies: 263652,  monthIdx:9  },
    {Month: "October '03",   Widgets:686254,  Blinkies: 472652,  monthIdx:10  },
    {Month: "November '03",  Widgets:820254,  Blinkies: 246652,  monthIdx:11 },
    {Month: "December '03",  Widgets:800254,  Blinkies: 826652,  monthIdx:12 }
   ]);
   
   private function formatThousands(val:Number):String
   {
    return Math.floor(val/100)/10   "K";
   }

  ]]>
 </mx:Script>
 
 <mx:Panel title="Sample Chart" width="100%" height="100%">
  <mx:ColumnChart id="colChart" dataProvider="{_chartData}" width="100%" height="100%" showDataTips="true">
   <mx:horizontalAxis>
    <mx:CategoryAxis categoryField="Month" displayName="Month"/>
   </mx:horizontalAxis>
   
   <mx:verticalAxis>
    <mx:LinearAxis displayName="Units Sold"/>
   </mx:verticalAxis>
   
   <mx:series>
    <mx:ColumnSeries xField="Month" yField="Widgets" displayName="TestWidgets">
     <mx:fill>
      <mx:SolidColor color="#82C9EB"/>
     </mx:fill>
    </mx:ColumnSeries>
    <mx:ColumnSeries xField="Month" yField="Blinkies" displayName="TestBlinkies"/>
   </mx:series>
   
  </mx:ColumnChart>
  <mx:Legend dataProvider="{colChart}"/>
 </mx:Panel>
 <mx:Style source="ChartStyles.css"/>
</mx:Application>

ChartStyles.css

ColumnChart
{
 fontFamily: Arial;
 gridLinesStyleName: columnChartGridLines;
 verticalAxisStyleName: linedNumericAxis;
 horizontalAxisStyleName: hangingCategoryAxis;
 
}
@font-face
{
 fontFamily: Arial;
 fontWeight: normal;
 fontStyle: normal;
 src: local("Arial");
}

The executing SWF file for the previous example is shown below: