Flex / Adobe Air - Chart legend/Axis fontsize too small - actionscript-3

Question

I'm adding a chart to my AIR App. Here is how:
private function CountersChart(container:VGroup):void {
var arr:Array = [];
var dt:Date = new Date();
var counters:Counters = Constants.srv.getCounters(dt.fullYear, dt.month);
var goals:ArrayCollection = Constants.srv.getGoals();
var index:int = 0;
var found:Boolean = false;
var now:Date = new Date();
while (!found) {
var goal:Goals = goals[index];
if (now.month+1==goal.month && now.fullYear==goal.year) {
found=true;
break;
} else
index++;
}
arr.push({label:"Calls", x:"Calls", y:counters.phone, y1:goals[index].calls});
arr.push({label:"Text", x:"Text", y:counters.sms, y1:goals[index].sms});
arr.push({label:"Email", x:"Email", y:counters.email, y1:goals[index].emails});
arr.push({label:"Marketing Tools", x:"Marketing Tools", y:counters.marketing, y1:goals[index].sendMarketingTools});
arr.push({label:"Meetings", x:"Meetings", y:counters.meeting, y1:goals[index].meetings});
arr.push({label:"Home Presentations Invites", x:"Home Presentations Invites", y:counters.homePresentationInvite, y1:goals[index].homePresentations});
arr.push({label:"Business Presentation Invites", x:"Business Presentation Invites", y:counters.businessPresentationInvite, y1:goals[index].businessPresentations});
// Create a column chart object
var stackedColumnChart:ColumnChart = new ColumnChart();
stackedColumnChart.dataProvider = arr;
stackedColumnChart.showDataTips = true;
stackedColumnChart.dataTipFunction = myDataTipFunction;
stackedColumnChart.percentWidth = 100;
// Set the horizontal axix category
var xAxis:CategoryAxis = new CategoryAxis();
xAxis.categoryField = "x";
stackedColumnChart.horizontalAxis = xAxis;
// ColumnSet.series is an array which contains
// an array of ColumnSeries objects.
var columnSet:ColumnSet = new ColumnSet();
columnSet.type = "stacked";
// Each item in seriesDetails becomes a different segment of
// a column in the stacked chart i.e. each item represents a series.
var seriesDetails:ArrayCollection = new ArrayCollection([
{YField:"y", DisplayName:"Actual"},
{YField:"y1", DisplayName:"Planned"},
]);
// Create a ColumnSeries, and an array to be
// populated with dynamically generated columnSeries objects
var columnSeries:ColumnSeries;
var seriesArray:Array = new Array();
var xr:AxisRenderer = new AxisRenderer();
xr.setStyle("fontSize",40);
//columnSeries.verticalAxis = xr;
// Generate an array of ColumnSeries objects
// which are then be applied to the ColumnSet series.
for(var i:int = 0; i < seriesDetails.length; i++){
columnSeries = new ColumnSeries();
columnSeries.yField = seriesDetails[i].YField;
columnSeries.displayName = seriesDetails[i].DisplayName;
columnSeries.setStyle("fill",fillsArray[i]);
seriesArray.push(columnSeries);
}
columnSet.series = seriesArray;
// c.series could take an array of column sets
// for displaying mixed charts i.e. c.series = [columnSet1, columnSet2];
stackedColumnChart.series = [columnSet];
//stackedColumnChart.showAllDataTips();
stackedColumnChart.showDataTips = true;
stackedColumnChart.id = "chart";
var legend:Legend = new Legend();
legend.direction = "horizontal";
legend.setStyle("fontSize",30);
legend.dataProvider = stackedColumnChart;
stackedColumnChart.setStyle("horizontalAxisRenderers", xr);
stackedColumnChart.addEventListener(MouseEvent.CLICK,function(event){return});
//Add chart to the display list.
container.addElement(stackedColumnChart);
container.addElement(legend);
}
The result draws the chart nicely BUT: The font size of the legend and the x/y axis are soooo small, Can't even read them.
I've tried to set the legend.setStyle("fontSize",fs) or to set the legend minHeight (as suggested here: Flex chart labels way too small, how to resize axis?
But to no avail :-(
How can I modify the font size for them?
Thanks

Answer 1

You need to provide the css for LegendItem class and ColumnChart class, and then it will pick up the style for it:
<fx:Style>
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/mx";
mx|LegendItem
{
fontSize:20;
}
mx|ColumnChart
{
fontSize:15;
}
</fx:Style>
Providing setStyle to Legend does not work.
Please let me know if it works for you.