2 Replies Latest reply on Oct 9, 2009 12:16 PM by Cr99

    Chart panel padding problem

    Cr99 Level 1

      I have a custom component which is not displaying it's components correctly.  Here is the problem (the background color is there just to show the padding problems):

       

      Picture 1.png

      Obviously the padding is larger on the left than the right, even though horizontalAlign is set to "center".  What is causing this?  Here is some sample code:

       

      <!-- Chart Panel -->

       

      <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" styleName="panelfilled" roundedBottomCorners="true" horizontalAlign="center"

      paddingLeft="10" paddingRight="10" paddingBottom="10" paddingTop="35" resizeEffect="Resize" >

       

      <mx:Style>

      .panelfilled  {

                  border-style: solid;

                  border-thickness: 0;

                  border-skin: ClassReference("border.SimpleGradientBorder");

                  fill-colors: #FFFFFF, #FFFFFF;

                  corner-radius: 20;

              }

      </mx:Style>

       

       

      ]]>

       

      </mx:Panel>

      // adding the chart to the panel via Actionscript snippets
      // here are the vertical axis objects (the horizontal axis is DateTimeAxis but is not shown here)

      var vAxis:LinearAxis = new LinearAxis();

      vAxis.baseAtZero = false;

      var axr:AxisRenderer = new AxisRenderer();

      axr.axis = vAxis;

      // flip left axis if location string is left

      if (location == "left") {

          axr.setStyle("verticalAxisTitleAlignment", "vertical");

      }

      axr.placement = location;  

      axr.setStyle("canDropLabels", "true");

      axr.setStyle("tickPlacement", "none");

      // genericChart is a CartesianChart

      genericChart.verticalAxisRenderers = renderers.toArray();

      genericChart.percentWidth = 90;

      genericChart.percentHeight = 100;

      genericChart.setStyle("fill", "#33cc33");

      genericChart.seriesFilters = [];  

       

      chartPanel.horizontalScrollPolicy = "off";

       

      chartPanel.addChild(genericChart);

      // genericLegend is a Legend

       

      genericLegend.dataProvider = genericChart;

      genericLegend.direction = "horizontal";

      BindingUtils.bindProperty(genericLegend, "width", chartPanel, "width");

         genericLegend.setStyle("direction", "horizontal");

       

       

       

      chartPanel.addChild(genericLegend);

       

      // end code snippets

       

      The problem gets even worse when percent width is set to 100% as it completely clips off the chart:

       

      Picture 2.png