Placement of Axes in a Flex Chart

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
{

super.updateAxisLayout(unscaledWidth,unscaledHeight);

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.

 

<mx:horizontalAxisRenderer>
<mx:AxisRenderer>
<mx:labelRenderer>
<mx:Component>
<mx:HBox>
<mx:Script>
<![CDATA[
override public function set data(value:Object):void
{
super.data = data;
l1.text = value.text;
}
]]>
</mx:Script>

<mx:Label paddingTop=”-25” id = “l1“/>
</mx:HBox>
</mx:Component>
</mx:labelRenderer>
</mx:AxisRenderer>
</mx:horizontalAxisRenderer>

 

 

 

About these ads