0 Replies Latest reply on Oct 21, 2011 12:13 PM by MichaelDelaney

    Styling MX Charts Flex 4.5.1 mobile project - AxisRenderer.rotateLabel not working

    MichaelDelaney

      I'm using an MX Bar Chart in my mobile app and I'm unable to get the rotateLabel property of the AxisRenderer to work properly. I've tried using a CSS style for the chart (since the rotateLabel property requires that a non-device font be used). But this doesn't seem to fix the problem, and just gives me a warning saying that CSS Selectors are not supported for components. I have noticed in debugging that the labels for the CategoryAxis are in fact a spark label, while the axis titles are not. Is there some work around to get my category labels to rotate 90 degrees?

       

      Here is the relavent code:

       

       

      <fx:Style>

           @namespace mx "library://ns.adobe.com/flex/mx"

           @font-face{

                src: url("../assets/verdana.tff");

                fontFamily: verdanaFont;

                embedAsCFF: false;

           }

           mx|BarChart{

                fontFamily:verdanaFont;

                fontSize:16;

           }

      </fx:Style>

      <mx:BarChart id="barchartX" left="40" right="40" bottom="40" paddingBottom="40"
              
      dataProvider="{chartDataObj.series}" showDataTips="false"
              
      itemClick="editItem_clickHandler(event)" includeIn="BAR" visible="true">
         
      <mx:verticalAxis>
              
      <mx:CategoryAxis id="vaxis" categoryField="title" title="click here to rename this axis" />
         
      </mx:verticalAxis>

         
      <mx:verticalAxisRenderers>
              
      <mx:AxisRenderer axis="{vaxis}" labelRotation="45" click="axis_clickHandler(event)"/>
         
      </mx:verticalAxisRenderers>

         
      <mx:horizontalAxis>
             
      <mx:LinearAxis id="haxis" title="click here to rename this axis" />
         
      </mx:horizontalAxis>

         
      <mx:horizontalAxisRenderers>
             
      <mx:AxisRenderer axis="{haxis}" labelRotation="0" click="axis_clickHandler(event)"/>
         
      </mx:horizontalAxisRenderers>

         
      <mx:series>
             
      <mx:BarSeries labelPosition="none" yField="title" xField="value" fills="{chartDataObj.colors}"/>
         
      </mx:series>

      </mx:BarChart>