Flex: Tiny axis labels with rotateLabels and canDropLabels - actionscript-3

Question

I am using a AxisRenderer with rotateLabels canDropLabels for my CategoryAxis and the labels are appearing microscopic. I can show every other label just fine, but the labels do not enlarge. I have provided an full example below. If you need the Ubuntu font you can download it here or use your own. The CategoryAxis should show every 3 labels.
<?xml version="1.0"?>
<!-- Derrived From: http://livedocs.adobe.com/flex/3/html/help.html?content=charts_types_06.html -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
initialize="init(event)" width="90%" height="60%">
<mx:Style>
#namespace mx "http://www.adobe.com/2006/mxml";
#font-face{
src: url("../assets/Ubuntu.ttf");
fontFamily:Ubuntu;
embedAsCFF:false;
advancedAntiAliasing:true;
}
mx|ColumnChart {
fontFamily:Ubuntu;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
import mx.formatters.DateFormatter;
public static const msPerSecond:uint = 1000;
public static const msPerMinute:uint = msPerSecond * 60;
public static const msPerHour:uint = msPerMinute * 60;
public static const msPerDay:uint = msPerHour * 24;
public static const msPerWeek:uint = msPerDay * 7;
protected var formatter:DateFormatter;
private var currIndex:uint = 0;
[Bindable]
public var expenses:ArrayCollection;
protected function init(event:FlexEvent):void {
formatter = new DateFormatter();
formatter.formatString = 'MM/DD';
generateExpenses();
}
private function generateExpenses():void {
var now:Date = new Date(), d:Date;
expenses = new ArrayCollection();
// The next 60 days inclusive
for (var i:uint = 0; i < 60; i++) {
d = new Date();
d.time = now.time+i*msPerDay;
var r:uint = rand(100, 1000);
var o:uint = rand(1, 100);
expenses.addItem({
'date':d,
'profit':r,
'expenses':rand(r-o, r+o)
});
}
}
public function categoryLabel(val:Object, prev:Object,
axis:CategoryAxis, item:Object):String {
var index:uint = currIndex;
currIndex++;
return showLabel(index, axis.dataProvider.length, 20) ?
formatter.format(val) : '';
}
private function rand(lb:int, ub:int):Number {
return Math.floor(Math.random() * (1 + ub - lb)) + lb;
}
private function showLabel(index:uint, max:uint, interval:uint):Boolean {
return index % int(Math.ceil(max/interval)) == 0;
}
]]>
</mx:Script>
<!-- Define custom colors for use as column fills. -->
<mx:SolidColor id="sc1" color="0x00FF00" alpha=".3"/>
<mx:SolidColor id="sc2" color="0xFF0000" alpha=".3"/>
<!-- Define custom Strokes for the columns. -->
<mx:SolidColorStroke id="s1" color="0x00FF00" weight="2"/>
<mx:SolidColorStroke id="s2" color="0xFF0000" weight="2"/>
<mx:Panel title="ColumnChart Control with Custom Column Styles"
width="100%" height="100%">
<mx:HBox width="100%" height="100%">
<mx:Legend dataProvider="{myChart}"/>
<mx:ColumnChart id="myChart" dataProvider="{expenses}" showDataTips="true"
width="100%" height="100%" gutterBottom="50">
<mx:horizontalAxis>
<mx:CategoryAxis id="cAxis" dataProvider="{expenses}"
categoryField="date" labelFunction="categoryLabel"/>
</mx:horizontalAxis>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer axis="{cAxis}" labelRotation="{-25}"
canStagger="false" canDropLabels="true" fontSize="20"/>
</mx:horizontalAxisRenderers>
<mx:series>
<mx:ColumnSeries
xField="date"
yField="profit"
displayName="Profit"
fill="{sc1}"
stroke="{s1}"
/>
<mx:ColumnSeries
xField="date"
yField="expenses"
displayName="Expenses"
fill="{sc2}"
stroke="{s2}"
/>
</mx:series>
<mx:verticalAxis>
<mx:LinearAxis id="lAxis"/>
</mx:verticalAxis>
</mx:ColumnChart>
</mx:HBox>
</mx:Panel>
</mx:Application>

Answer 1

Hi Please modify your code as below:- The CategoryAxis will show every 3 labels.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
initialize="init(event)" >
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<mx:SolidColor id="sc1" color="0x00FF00" alpha=".3"/>
<mx:SolidColor id="sc2" color="0xFF0000" alpha=".3"/>
<!-- Define custom Strokes for the columns. -->
<mx:SolidColorStroke id="s1" color="0x00FF00" weight="2"/>
<mx:SolidColorStroke id="s2" color="0xFF0000" weight="2"/>
</fx:Declarations>
<fx:Style>
#namespace s "library://ns.adobe.com/flex/spark";
#namespace mx "library://ns.adobe.com/flex/mx";
#font-face{
src: url("../assets/Ubuntu.ttf");
fontFamily:Ubuntu;
embedAsCFF:false;
advancedAntiAliasing:true;
}
mx|ColumnChart {
fontFamily:Ubuntu;
}
</fx:Style>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
import mx.formatters.DateFormatter;
public static const msPerSecond:uint = 1000;
public static const msPerMinute:uint = msPerSecond * 60;
public static const msPerHour:uint = msPerMinute * 60;
public static const msPerDay:uint = msPerHour * 24;
public static const msPerWeek:uint = msPerDay * 7;
protected var formatter:DateFormatter;
private var currIndex:uint = 0;
[Bindable]
public var expenses:ArrayCollection;
protected function init(event:FlexEvent):void {
formatter = new DateFormatter();
formatter.formatString = 'MM/DD';
generateExpenses();
}
private var dataToShow:uint = 60;
private function generateExpenses():void {
var now:Date = new Date(), d:Date;
expenses = new ArrayCollection();
// The next 60 days inclusive
for (var i:uint = 0; i < dataToShow; i++) {
d = new Date();
d.time = now.time+i*msPerDay;
var r:uint = rand(100, 1000);
var o:uint = rand(1, 100);
expenses.addItem({
'date':d,
'profit':r,
'expenses':rand(r-o, r+o)
});
}
}
public function categoryLabel(val:Object, prev:Object,
axis:CategoryAxis, item:Object):String {
var index:uint = currIndex;
currIndex++;
return showLabel(index, axis.dataProvider.length, dataToShow) ?
formatter.format(val) : '';
}
private function rand(lb:int, ub:int):Number {
return Math.floor(Math.random() * (1 + ub - lb)) + lb;
}
private function showLabel(index:uint, max:uint, interval:uint):Boolean {
return index % int(Math.ceil(max/interval)) == 0;
}
]]>
</fx:Script>
<mx:Panel title="ColumnChart Control with Custom Column Styles"
width="100%" height="100%">
<mx:HBox width="100%" height="100%">
<mx:Legend dataProvider="{myChart}"/>
<mx:ColumnChart id="myChart" dataProvider="{expenses}" showDataTips="true"
width="100%" height="100%" gutterBottom="50">
<mx:horizontalAxis>
<mx:CategoryAxis id="cAxis" dataProvider="{expenses}"
categoryField="date" labelFunction="categoryLabel"/>
</mx:horizontalAxis>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer axis="{cAxis}" labelRotation="{-25}"
canStagger="false" canDropLabels="true" />
</mx:horizontalAxisRenderers>
<mx:series>
<mx:ColumnSeries
xField="date"
yField="profit"
displayName="Profit"
fill="{sc1}"
stroke="{s1}"
/>
<mx:ColumnSeries
xField="date"
yField="expenses"
displayName="Expenses"
fill="{sc2}"
stroke="{s2}"
/>
</mx:series>
<mx:verticalAxis>
<mx:LinearAxis id="lAxis"/>
</mx:verticalAxis>
</mx:ColumnChart>
</mx:HBox>
</mx:Panel>
</s:Application>