label rotation

[exclosion]

Can someone help me see y my labels on x-axis is not rotated? :(
Can labels be rotated in line chart?
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
pageTitle="Add and remove lineSeries" backgroundGradientAlphas="[1.0, 1.0]"
backgroundGradientColors="[#FFFFFF, #FFFFFF]">
<mx:Script>
<![CDATA[

import mx.collections.ArrayCollection;


[Bindable]
public var dataRecord:Array = [
{ Month: "Dec-99", AllRegions:100, Asia: 100, EmergingMarkets:100, Europe:100, LatinAmerica:100, NorthAmerica:100},
{ Month: "Jan-00", AllRegions:101.5207, Asia: 99.7953, EmergingMarkets:103.0175, Europe:104.8088, LatinAmerica:102.5237, NorthAmerica:101.017},
{ Month: "Feb-00", AllRegions:107.1578, Asia: 102.4902, EmergingMarkets:106.7674, Europe:115.551, LatinAmerica:104.131, NorthAmerica:108.0212},
{ Month: "Mar-00", AllRegions:108.8857, Asia: 103.725, EmergingMarkets:113.0154, Europe:120.5371, LatinAmerica:105.8063, NorthAmerica:109.67},
{ Month: "Apr-00", AllRegions:107.5124, Asia: 100.3126, EmergingMarkets:109.497, Europe:118.6162, LatinAmerica:104.0156, NorthAmerica:108.4905},
{ Month: "May-00", AllRegions:107.5807, Asia: 100.9242, EmergingMarkets:106.1425, Europe:116.424, LatinAmerica:104.6255, NorthAmerica:108.2713},
{ Month: "Jun-00", AllRegions:110.198, Asia: 104.4058, EmergingMarkets:108.9119, Europe:117.0299, LatinAmerica:109.655, NorthAmerica:111.8467},
{ Month: "Jul-00", AllRegions:110.5174, Asia: 103.23, EmergingMarkets:111.6206, Europe:119.2547, LatinAmerica:111.858, NorthAmerica:112.1551},
{ Month: "Aug-00", AllRegions:114.6306, Asia: 105.4864, EmergingMarkets:116.4764, Europe:123.3124, LatinAmerica:114.235, NorthAmerica:117.299},
{ Month: "Sep-00", AllRegions:114.3216, Asia: 103.1232, EmergingMarkets:112.7312, Europe:120.785, LatinAmerica:114.1793, NorthAmerica:117.978},
{ Month: "Oct-00", AllRegions:114.1689, Asia: 101.5069, EmergingMarkets:111.7047, Europe:121.2815, LatinAmerica:113.9665, NorthAmerica:117.6426}];




/* This method looks to see if the button you just pressed is selected (toggle on) or not.
If the toggle is on that means the user is adding the line,
if the toggle is off that means the user is removing the line,
and this method calls the appropriate method.*/
private function updateChart(evt:Event):void
{
if ( evt.currentTarget.selected == true )
{
addToChart(evt.currentTarget.label);
} else {
removeFromChart(evt.currentTarget.label);
}
}

/*Here is the addToChart method. This method creates a new LineSeries and adds it to the chart.
Note that the LineSeries DataProvider is the same of the LineChart
and the data you're referring to (yField) should already be present in the DataProvider.*/
private function addToChart(item:String):void
{
var newLS:LineSeries = new LineSeries();
var newStroke:Stroke = new Stroke();
newStroke.color = strokeColor(item);

newLS.yField = item;
newLS.displayName = item;
newLS.setStyle('form','curve');
newLS.dataProvider = expensesAC;
newLS.setStyle('lineStroke',newStroke);
var tmp:Array = linechart.series;
tmp.push(newLS);
linechart.series = tmp;
linechart.invalidateSeriesStyles();
}

/*You may have noticed the line newLS.setStyle('lineStroke',newStroke);.
This refers to the following method, all it does is assigns a color based on
the button selected.*/
private function strokeColor(item:String):uint
{
switch (item)
{
case 'Asia':
return 0x0000F;
break;
case 'EmergingMarket':
return 0xFF0000;
break;
case 'Europe':
return 0x00FF00;
break;
case 'LatinAmerica':
return 0xDDDDDD;
break;
case 'NorthAmerica':
return 0x444444;
break;
default:
return 0x000000;
break;
}
}

//remove method
private function removeFromChart(item:String):void
{
var objToRemoveIndex:int;
for ( var i:int = 0; i < linechart.series.length; i++ )
{
if ( linechart.series[i].yField == item )
{
objToRemoveIndex = i;
}
}

var tmp:Array = linechart.series;
tmp.splice(objToRemoveIndex,1);
linechart.series = tmp;
linechart.invalidateSeriesStyles();
}

// The default series gets added with the CreationComplete method:
private function init():void
{
addToChart('Asia');
Asia.selected = true;
}


]]>
</mx:Script>

<mx:ArrayCollection id="expensesAC" source="{dataRecord}"/>

<mx:Panel title="LineChart Example" height="500" width="100%" layout="vertical">

<mx:HBox id="choices" horizontalGap="0">
<mx:CheckBox id="Asia" label="Asia" toggle="true" click="updateChart(event)"/>
<mx:CheckBox id="EmergingMarket" label="EmergingMarket" toggle="true" click="updateChart(event)"/>
<mx:CheckBox id="Europe" label="Europe" toggle="true" click="updateChart(event)"/>
<mx:CheckBox id="LatinAmerica" label="LatinAmerica" toggle="true" click="updateChart(event)"/>
<mx:CheckBox id="NorthAmerica" label="NorthAmerica" toggle="true" click="updateChart(event)"/>

</mx:HBox>

<mx:LineChart id="linechart" dataProvider="{expensesAC}" height="80%" width="100%" showDataTips="true" >
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="Month" id="a1"/>
</mx:horizontalAxis>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer labelRotation="45" axis="{a1}"/> <------//here this part!
</mx:horizontalAxisRenderers>
<mx:series>
<mx:Array>
<mx:LineSeries yField="month" >
<mx:lineStroke>
<mx:Stroke weight="2"/>
</mx:lineStroke>
</mx:LineSeries>
</mx:Array>
</mx:series>

</mx:LineChart>

<mx:Legend dataProvider="{linechart}" labelPlacement="right" verticalGap="2" direction="horizontal"/>

</mx:Panel>

</mx:Application>

[exclosion]

I got the label to rotate!!!
u have to embed the font into ur css.
something like this@font-face {
src: local("Arial");
font-family: Arial;
}

ColumnChart {
font-family: Arial;
font-size:10;
}