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

    Chart panel padding problem


      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" >



      .panelfilled  {

                  border-style: solid;

                  border-thickness: 0;

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

                  fill-colors: #FFFFFF, #FFFFFF;

                  corner-radius: 20;








      // 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";



      // genericLegend is a Legend


      genericLegend.dataProvider = genericChart;

      genericLegend.direction = "horizontal";

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

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






      // 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