BarChart Y Axis Label Issue

[Deepak MS <me...@gmail.com>]

Hi there,
We have a requirement to display long text on Y axis of barchart. Something
like this:
http://pasteboard.co/fftvusD6W.png

I tried to use labelClass for AxisRenderer (for vertical axis). It's simply
an extension of spark Label with maxDisplayedLines set to 2 (to display 2
lines or may be even 3 lines). But this is what I get on screen:
http://pasteboard.co/ffG1FEWim.png


Code for reference:
http://codepaste.net/uujeki

labelClass:
http://codepaste.net/u65crn


Flex 4.14.1 | FP 17.0 | AIR 18.0

Any ideas on how I can get it there?

Re: BarChart Y Axis Label Issue

[Deepak MS <me...@gmail.com>]

Sweet! That's exactly what I wanted! Thanks OK.

On Wed, Aug 31, 2016 at 7:16 PM, OK <po...@olafkrueger.net> wrote:

> Mabye you could use the 'labelRenderer' setter of your AxisRenderer to
> pass a
> renderer that fits your needs. You have to implement the renderer by
> yourself. It works similiar to a 'itemRenderer'
>
> Here you could find some details [1]
>
> HTH,
> Olaf
>
> [1]
> http://flexcoders.10928.n7.nabble.com/Ely-How-do-you-
> wordwrap-a-label-on-a-bar-chart-td8090.html
>
> [2] Extract from [1]:
> A more involved method would be to use a labelRenderer (similar to the
> following), for the AxisRenderer.  For word-wrap, you would change the
> _label variable type from Label to UITextField or TextArea; and set the
> desired styles and properties.  Caveat: I've found that if the entire
> view is using a show effect (like yours), the app locks-up (probably
> asking the player to do too much).  Also, if you use a showDataEffect on
> a series of a chart, the effect doesn't play if you use a labelRenderer.
>
> //___________________________________
>
> <mx:verticalAxisRenderer>
>    <mx:AxisRenderer labelRenderer="view.chart.MyAxisLabelRenderer"/>
> </mx:verticalAxisRenderer>
>
> //___________________________________
>
> package view.chart
> {
>    import mx.core.UIComponent;
>    import mx.core.IDataRenderer;
>    import mx.charts.AxisLabel;
>    import mx.controls.Label;
>
>    public class MyAxisLabelRenderer extends UIComponent implements
> IDataRenderer
>    {
>      private var _axisLabel:AxisLabel;
>      private var _label:Label;
>
>    public function MyAxisLabelRenderer():void
>    {
>      super();
>      _label = new Label();
>      addChild(_label);
>    }
>
>    public function get data():Object
>    {
>      return _axisLabel;
>    }
>
>    public function set data(value:Object):void
>    {
>      if (_axisLabel == value)
>        return;
>      _axisLabel = AxisLabel(value);
>
>      if(_chartItem != null)
>      {
>        _label.text = AxisLabel(_axisLabel).text.toString();
>      }
>    }
>
>    override protected function
> updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void
>    {
>      super.updateDisplayList(unscaledWidth, unscaledHeight);
>
>      _label.setStyle("textAlign","right");
>      _label.width = 200; //this could be dynamic; based on the gutter
> size
>
> _label.setActualSize(_label.getExplicitOrMeasuredWidth(),_label.getExpli\
> citOrMeasuredHeight());
>      _label.move(-200,-6); //this could be dynamic; based on the gutter
> size
>    }
>   }
> }
>
>
>
>
>
> --
> View this message in context: http://apache-flex-users.
> 2333346.n4.nabble.com/BarChart-Y-Axis-Label-Issue-tp13479p13480.html
> Sent from the Apache Flex Users mailing list archive at Nabble.com.
>

Re: BarChart Y Axis Label Issue

[OK <po...@olafkrueger.net>]

Mabye you could use the 'labelRenderer' setter of your AxisRenderer to pass a
renderer that fits your needs. You have to implement the renderer by
yourself. It works similiar to a 'itemRenderer'

Here you could find some details [1]

HTH,
Olaf

[1]
http://flexcoders.10928.n7.nabble.com/Ely-How-do-you-wordwrap-a-label-on-a-bar-chart-td8090.html

[2] Extract from [1]:
A more involved method would be to use a labelRenderer (similar to the
following), for the AxisRenderer.  For word-wrap, you would change the
_label variable type from Label to UITextField or TextArea; and set the
desired styles and properties.  Caveat: I've found that if the entire
view is using a show effect (like yours), the app locks-up (probably
asking the player to do too much).  Also, if you use a showDataEffect on
a series of a chart, the effect doesn't play if you use a labelRenderer.

//___________________________________

<mx:verticalAxisRenderer>
   <mx:AxisRenderer labelRenderer="view.chart.MyAxisLabelRenderer"/>
</mx:verticalAxisRenderer>

//___________________________________

package view.chart
{
   import mx.core.UIComponent;
   import mx.core.IDataRenderer;
   import mx.charts.AxisLabel;
   import mx.controls.Label;

   public class MyAxisLabelRenderer extends UIComponent implements
IDataRenderer
   {
     private var _axisLabel:AxisLabel;
     private var _label:Label;

   public function MyAxisLabelRenderer():void
   {
     super();
     _label = new Label();
     addChild(_label);
   }

   public function get data():Object
   {
     return _axisLabel;
   }

   public function set data(value:Object):void
   {
     if (_axisLabel == value)
       return;
     _axisLabel = AxisLabel(value);

     if(_chartItem != null)
     {
       _label.text = AxisLabel(_axisLabel).text.toString();
     }
   }

   override protected function
updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void
   {
     super.updateDisplayList(unscaledWidth, unscaledHeight);

     _label.setStyle("textAlign","right");
     _label.width = 200; //this could be dynamic; based on the gutter
size
   
_label.setActualSize(_label.getExplicitOrMeasuredWidth(),_label.getExpli\
citOrMeasuredHeight());
     _label.move(-200,-6); //this could be dynamic; based on the gutter
size
   }
  }
}





--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/BarChart-Y-Axis-Label-Issue-tp13479p13480.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.