1 Reply Latest reply on Feb 9, 2010 12:18 AM by NeilTQ

    Barchart Category Label Sizing

    NeilTQ

      I'm having an issue with label sizing on a barchart that I have created.  Basically, the labels are reduced to such a size that they are unreadable.  I've done plenty of reading and tried so many things that I've kind of lost count now, but I was wondering if anyone else had experienced a similar problem or had any ideas about how I might get around it.  I've looked at the obvious things such as fontsize throughout the chart component, axisrenderer, labelrenderer, etc without any effect.

       

      The chart is pretty straight-forward.  I've created it as a component with no particularly flashy add-ons.  the code is below...

       

       

       

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:BarChart xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" fontSize="10">

       

      <mx:Script>
      import mx.core.Application;
      import mx.collections.SortField;
      import mx.collections.Sort;
      import mx.collections.ArrayCollection;
      import mx.charts.*;
      import mx.collections.ArrayList;
      import mx.charts.chartClasses.IAxis;

       

       

       


      private function percFormat(labelValue:Number, previousValue:Object, axis:IAxis):String {
          return round.format(labelValue * 100)+" %";

       

      }

       

      private function commaFormat(labelValue:Number, previousValue:Object, axis:IAxis):String {
          return commasep.format(labelValue);

       

      }

       


      </mx:Script>

       

       

       

      <mx:CurrencyFormatter id="curr" currencySymbol="$" useThousandsSeparator="true" precision="0" /> 

       

      <mx:NumberFormatter id="commasep" thousandsSeparatorFrom="," precision="0"/>

       

      <mx:NumberFormatter id="round" precision="2"/>

       

      <mx:SeriesSlide id="Slide" duration="1000" direction="right" />
      <mx:SeriesInterpolate id="Interpolate" duration="1000" />

       


      <mx:Stroke id="axisStroke" color="#909090" weight="2" alpha="1" caps="round"/>

       


          <mx:verticalAxis>
              <mx:CategoryAxis id="vertAxis" categoryField="segment"/>
          </mx:verticalAxis>
                 
          <mx:horizontalAxis>
              <mx:LinearAxis id="horAxis" autoAdjust="true" labelFunction="commaFormat"/>
          </mx:horizontalAxis>

       

          <mx:verticalAxisRenderers>
              <mx:AxisRenderer axis="{vertAxis}" showLabels="true" axisStroke="{this.axisStroke}"/>               
          </mx:verticalAxisRenderers>
                 
          <mx:horizontalAxisRenderers>
              <mx:AxisRenderer axis="{horAxis}" placement="top" axisStroke="{this.axisStroke}"/>        
          </mx:horizontalAxisRenderers>
             
          <mx:series>
              <mx:BarSeries yField="segment" xField="{Application.application.sellerHL_chartView}" showDataEffect="Interpolate" creationCompleteEffect="slide"/>
          </mx:series>
             
      </mx:BarChart>

       

       

      If anyone has any thoughts, it would be greatly appreciated.

       

      Thanks,

       

      Neil.