Wednesday, February 25, 2009

Editing Vertical/horizontal Axis labels of Flex Charts Using labelrenderer

There are many charting components are provided by Adobe with Flex Builder professional to develop rich Dashboard like applications.
There are many provisions are given with those components to format/change the way of displaying the data in charts.
There are also many direct properties are given with the charting components to made changes to the developers wish.
When looking with the Axis labels the developers can change the angle in which the labels to be display by using the property


If also the same developer want to change the font-size,font-face,apply style then that can be achieved by creating simple labelrenderer which extends label.
here is the example in this im displaying one coloumn chart and i want to display the horizontal axis in Red in color and in font-size 13 pixels.

for this i have created one Renderer in Actionscript named InnerLabelRenderer which extends label
in that class by setting styles like

We can change the style of Axis labels

Download the source

Actionscript Code:

public class InnerlabelRenderer extends Label
private var _data:AxisLabel;

override public function get data():Object
return _data;

override public function set data(value:Object):void
if(value != null)
this.text ="";
this._data = value as AxisLabel;



MXML Code:

< id="column" dataprovider="{...}">
< categoryfield="...">
< /mx:horizontalAxis>
< labelrenderer="InnerLabelRenderer">
< /mx:horizontalAxisRenderer>
< /mx:series>
< /mx:ColumnChart>

Bookmark and Share


Neil August 15, 2009 at 10:55 AM  

hey Nice article.
I downloaded your source and It worked
But when I am implementing the same render er in my apps it shows error

TypeError: Error #1009: Cannot access a property or method of a null object reference.
at InnerlabelRenderer/set data()[C:\Documents and Settings\Administrator\My Documents\Flex Builder 3\dailychart\]
at mx.charts::AxisRenderer/processAxisLabels()[C:\Work\flex\dmv_automation\projects\datavisualisation\src\mx\charts\]
at mx.charts::AxisRenderer/measureLabels()[C:\Work\flex\dmv_automation\projects\datavisualisation\src\mx\charts\]
at mx.charts::AxisRenderer/calcRotationAndSpacing()[C:\Work\flex\dmv_automation\projects\datavisualisation\src\mx\charts\]
at mx.charts::AxisRenderer/adjustGutters()[C:\Work\flex\dmv_automation\projects\datavisualisation\src\mx\charts\]
at mx.charts.chartClasses::CartesianChart/updateAxisLayout()[C:\Work\flex\dmv_automation\projects\datavisualisation\src\mx\charts\chartClasses\]
at mx.charts.chartClasses::CartesianChart/updateDisplayList()[C:\Work\flex\dmv_automation\projects\datavisualisation\src\mx\charts\chartClasses\]
at mx.core::UIComponent/validateDisplayList()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\]
at mx.managers::LayoutManager/validateDisplayList()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\managers\]
at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\managers\]
at Function/
at mx.core::UIComponent/callLaterDispatcher2()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\]
at mx.core::UIComponent/callLaterDispatcher()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\]

Anonymous,  October 8, 2009 at 1:18 PM  

In your post above, the line:
this.text = "";

should actually be:
this.text = value.text.toString()

Post a Comment

  © Blogger templates by updated with tips

Back to TOP