1 Reply Latest reply on Sep 2, 2010 1:13 PM by krafttimd

    Chart HorizontalAxis - styling

    wurlyOnIce

      Is it possible to style the horizontalaxis in a chart with different colors?

      What i mean is the following:

      Say the horizontalaxis has values from 0 thru 100.

      Now i want the horizontalaxis to have the color green with values 0 thru 30, orange with values 31 thru 60 and red with values 61 thru 100

        • 1. Re: Chart HorizontalAxis - styling
          krafttimd Level 2

          Yes. I have done this by creating an itemRenderer and setting it on the BarSeries. My renderer extends UIComponent, implements IDataRenderer and overrides updateDisplayList.

           

          here is my update Display list code.

           

                  override protected function updateDisplayList(unscaledWidth:Number,
                                                                unscaledHeight:Number) : void {
                      super.updateDisplayList(unscaledWidth, unscaledHeight);
                         
                      var fill:Number = 0xFFFFFF;               
                       if(!isNaN(_chartItem.item.rate)  && _chartItem.item.responseRatesSupported) {
                           if(_chartItem.item.rate > 100) {
                              _chartItem.item.rate = 100;
                          }                                                 
                          if( _chartItem.item.rate < 41
                              && _chartItem.item.rate != 0) {
                               fill =  0xFF0000; //red#
                          }
                          if(_chartItem.item.rate < 86
                              && _chartItem.item.rate > 40) {
                              fill =  0xFFFF00; //yellow#
                          }
                          if(_chartItem.item.rate < 101
                              && _chartItem.item.rate > 80) {
                              fill =  0x00FF00; //green
                          }

           

                          if(_chartItem.item.rate == 0) {
                              fill = 0xFFFFFF;//white                   
                          }               
                         
                          //currentBarColor = fill;         
                          var rc:Rectangle = new Rectangle(0, 0, width , height );               
                          var g:Graphics = graphics;
                          g.clear();       
                          g.moveTo(rc.left,rc.top);
                          g.beginFill(fill);
                          g.lineTo(rc.right,rc.top);
                          g.lineTo(rc.right,rc.bottom);
                          g.lineTo(rc.left,rc.bottom);
                          g.lineTo(rc.left,rc.top);
                          g.endFill();

           

                         }

           

           

          hope this helps.

          T.K.