Placement of Axes in a Flex Chart

February 29, 2008

In Flex 3, we added multiple axes and renderers feature, where the developer could have any number of axes and they could place the horizontal axes either on bottom / top and the vertical axes on left / right. However there were some requests to place it in the middle of the chart.

One could easily customize the Charting API to achieve this, just override the function updateAxisLayout in a customized chart as shown and change the positions of the axisrenderers, you should get something like the screenshot below

override protected function updateAxisLayout(unscaledWidth:Number, unscaledHeight:Number):void


verticalAxisRenderer.move(verticalAxisRenderer.x – unscaledWidth / 2, verticalAxisRenderer.y);
horizontalAxisRenderer.move(horizontalAxisRenderer.x,horizontalAxisRenderer.y – unscaledHeight / 2);




You can notice that there is some amount of overlap between the labels of the verticalAxisRenderer and the horizontalAxisRenderer, you could circumvent this by using your own labelRenderer for the AxisRenderer, something like this.




override public function set data(value:Object):void

{ = data;

l1.text = value.text;




<mx:Label paddingTop=”-25” id = “l1/>





3 Responses to “Placement of Axes in a Flex Chart”

  1. Jonathan Jarvis Says:

    Do you know of a way to stack multiple axes on a flex chart? I’d like to put a line chart and bar chart together, and place the line chart on top of the column chart:

    [Line Chart 1-100
    100 ———–\
    … \______________
    [Column Chart
    10 20 20

    The x axis will line up between the two charts.

  2. sunban Says:

    This is not possible in Flex 3, there is a bug to have this feature, you can vote for this enhancement to be done in the next Flex release.

  3. Rick Holland Says:

    updateAxisLayout() is not a local or inherited method of LineChart in the Flex 3 documentation. Am i looking in the wrong place?

    Thank you

    Rick Holland

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: