Flex Examples
The following example shows how you can rotate the vertical and horizontal axis renderer’s label by setting the labelRotation style.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/15/rotating-labels-in-a-flex-chart-axis-using-the-labelrotation-style/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
@font-face {
src: local("Arial");
font-family: EmbeddedArial;
}
BarChart {
font-family: EmbeddedArial;
}
</mx:Style>
<mx:ArrayCollection id="arrColl">
<mx:source>
<mx:Array>
<mx:Object name="R Winn" obp=".353" slg=".445" avg=".300" />
<mx:Object name="P Feliz" obp=".290" slg=".418" avg=".253" />
<mx:Object name="O Vizquel" obp=".305" slg=".316" avg=".246" />
<mx:Object name="B Molina" obp=".298" slg=".433" avg=".276" />
<mx:Object name="R Durham" obp=".295" slg=".343" avg=".218" />
</mx:Array>
</mx:source>
</mx:ArrayCollection>
<mx:ApplicationControlBar dock="true">
<mx:Form>
<mx:FormHeading label="labelRotation" />
<mx:FormItem label="horizontalAxisRenderer:">
<mx:HSlider id="horizontalLabelRotation"
minimum="-90"
maximum="90"
value="0"
liveDragging="true"
snapInterval="10"
tickInterval="10" />
</mx:FormItem>
<mx:FormItem label="verticalAxisRenderer:">
<mx:HSlider id="verticalLabelRotation"
minimum="-90"
maximum="90"
value="0"
liveDragging="true"
snapInterval="10"
tickInterval="10" />
</mx:FormItem>
</mx:Form>
<mx:Spacer width="100%" />
<mx:Legend dataProvider="{barChart}"/>
</mx:ApplicationControlBar>
<mx:BarChart id="barChart"
showDataTips="true"
dataProvider="{arrColl}"
width="100%"
height="100%">
<!-- vertical axis -->
<mx:verticalAxis>
<mx:CategoryAxis categoryField="name" title="Player"/>
</mx:verticalAxis>
<!-- vertical axis renderer -->
<mx:verticalAxisRenderer>
<mx:AxisRenderer labelRotation="{verticalLabelRotation.value}" />
</mx:verticalAxisRenderer>
<!-- horizontal axis renderer -->
<mx:horizontalAxisRenderer>
<mx:AxisRenderer labelRotation="{horizontalLabelRotation.value}" />
</mx:horizontalAxisRenderer>
<!-- series -->
<mx:series>
<mx:BarSeries id="obpSeries"
yField="name"
xField="obp"
displayName="obp" />
<mx:BarSeries id="slgSeries"
yField="name"
xField="slg"
displayName="slg" />
<mx:BarSeries id="avgSeries"
yField="name"
xField="avg"
displayName="avg" />
</mx:series>
</mx:BarChart>
</mx:Application>
View source is enabled in the following example.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
What we need is a way to rotate the label for the vertical axis 180 degrees. It’s upside down.
Nice to know that. I notice that font has to be embedded in order to have font rotation done correctly.
Tianzhen Lin,
Yeah, the general rule of thumb in Flash/Flex is that if a font is going to be rotated or faded, it needs to be embedded.
Peter
Mike,
Can you please file a bug in the public Flex bug base, http://bugs.adobe.com/flex/
Thanks,
Peter
Tianzhen, you can add a filter to a textfield and rotate without embedding.
Mike,
Ooh, I found it! (Wasn’t easy…) They’ve already fixed the flipped-180 vertical axis title thing, released already in my version (Flex 3.0 beta). You have to add an axis renderer though:
Why that isn’t the default, I do not know.
Cheers,
Ginger
Hmph. Sorry about that last, posting a comment killed my inline source code.
Basically:
the vertical LinearAxis or whatever needs id and title fields set
under the mx:verticalAxis block, you need an mx:verticalAxisRenderers block, with an AxisRenderer inside it
That AxisRenderer sets axis=the linear Axis id, and verticalAxisTitleAlignment=”vertical”
LabelRotation works in in application directly, however it does not work through module. Is that a bug of flex ?
Wang Baoyuan,
Can you please file a bug at http://bugs.adobe.com/flex/ and include a simple test case (if possible) and somebody can take a look.
Also, if you can post the bug number here, a few of us can subscribe/vote on the bug.
Thanks,
Peter
bug report here at
http://bugs.adobe.com/jira/browse/FLEXDMV-1599
Hi, good job btw…
i need to display the DataTips in to the column, if some one haves the knowledge plz let me know..
Never mind i found it..
here it is:
http://blog.flexexamples.com/2007/11/25/adding-custom-labels-to-a-flex-columnchart-controls-column-series/
I have a ColumnChart and when I used the embedded font and rotate the horizontal labels 90 degree, the font for the horizontal labels are extra small where the vertical labels are fine. If I keep increasing the font-size the horizontal labels only get a fractional increase. How can I fix that?
Thanks,
Hi,
I am facing some problem while trying to use Axis in my chart.
I am using multiple vertical axis where I am assigning each series its own axis.
When user brings the mouse over any of the series data I want to show the Axis type associated with that series.
I have gone half-way by using DatatipFunction.
Using HitData property, I was successful to get the handle on selected series but now what ?
I can get an Instance of IAxis using myseries.verticalAxis but this does not tell me the axis type, whether it’s linear,datetime or category.
Has anyone tried this before ?? Any idea how to get the actual class definition of the axis (categoryaxis,linearaxis,etc) in such scenario ??
Thanks in advance .
can anyone tell me how to rotate the display name of vertical axis in flex 3… its not working with axis renderers…
If verticalRenderer is declared as –
var verticalRenderer:AxisRenderer = new AxisRenderer();
verticalRenderer.setStyle(“verticalAxisTitleAlignment”, “vertical”);
This will resolve your issue.
Regards
Thanks.. I am new to flex..
Can you please guide me where i should add this content, within verticalAxis or within verticalAxisRenderers..
In the above example i have to rotate label “player” on y-axis to 180 degree…Can you guide me with reference to above example…
hello all,
when i reduced the width and height of application to 300 * 250 and add more data to array,
then i found that labels of X axis are not visible properlly, when i write font-size:20 at stylessheet,
it is increasing size of both x and y axis.
could we increase the only size of y axis which is rotated?
thx in advanced,
:)
This solution does not work when Application contains modules.
I have done all the mandatory steps required as guided above -
1. Embedded font.
2. Specified the font-family for the Chart.
3. Used labelRotation style for verticalAxisRenderer.
If someone can please help.
Thanks in advance.
Mithun
If you embed the font in the main application that loads the modules, it will work.
We had issues with rotated labels until we changed the framework linkage from Runtime shared library (RSL) to Merged into code.
Ja, thanks for posting that.
- I’ve spent ages trying to figure out why embedding the font made the labels disappear.
Stopped using RSLs and it worked fine.
Trouble is we need RSLs, anyone have a work around by any chance ??
Gerry
Alan is right.
“If you embed the font in the main application that loads the modules, it will work.”
So what if I wanted to display the Vertical label the other way, I notice that -90 and +90 the label displays the same way, why? Should it not be flipped? Also what if I want to rotate the Title of the Horizontal axis. The reason is, that I have a chart that displays information which can be ‘rotated’ in accordance with direction, so the whole chart is rotated, which then prints the labels and titles upside down, I tried to counter this with the rotation, but this fails as it seems it will not accept values greater than or less than 90 for the labels and you can not ‘flip’ the horizontal title, oh the joys of flex development!