Trim or Limit the Axis label length of Flex-Charts using Actionscript

One common problem that all the developers facing when creating flex applications with Flex Charting components is with displaying axis labels,when the axis labels exceed some limit then the label of next one one automatically wrap to next line.Some times if all the label text's length is large take 15 to 20 characters then that time the labels will overlap with each other and total chart will not look nice.



One way to handle this situation is just limit the label to some length and display it with ellipses.

We can get this by just modify the code for my previous post "Editing Vertical/horizontal Axis labels of Flex Charts Using labelrenderer"

Editing Vertical/horizontal Axis labels of Flex Charts Using labelrenderer post is discussing about changing the styles of Axis labels.That is achieved by the labelfunction. For limit/trim the label text we are going to use that labelfunction only.

Download the source of my previous post and  make the following change in set data(value:Object) function

override public function set data(value:Object):void
{
if(value != null)
{
this.text ="";
this.toolTip= String(value.text); //Display original label in Tooltip
var length:int = value.text.toString().length;
if (length > 8) {
this.text = value.text.toString().substr(0, 8) + "..";
} else {
this.text = String(value.text);
}

}
}



this.toolTip= String(value.text); will display the original label content in tooltip

Note : The datas used with the samples to demonstrate concept are only test data