Width of stack chart not getting retained in Flex 4 but working in Flex3

Question

I have a stack chart on  my dashboard when I click on stack chart it become a column chart. When I trying  to come back on stack chart by clicking on column chart the width of columns of  stack chart does not match with the previous stack  chart.
Note: The same code is  working fine in flex 3 version.
How can I maintain the  same width in both stack charts in flex 4 as it is performing in  flex3?
Step 1 Monthly stack chart.
Initially when I click on the equipment break down checkbox the stack chart appears as shown in the below screen shot.
Step 2: Monthly chart: Then when I click on the above “Monthly stack chart”, then I resume to my original bar chart appearance as shown in the below screenshot.
Step 3: Monthly stack chart: Further when I click on the above “Monthly chart” bar chart and move back to the “monthly stack chart” it appears as in the below screen shot in flex 4. The width of the chart in step 3 does not match with the width in step 1 of “Monthly Stack Chart”.
Note: In flex 3 the same step 3 appears to be as shown in the below screenshot.
How can I maintain the same width in step 1 and step 3 charts in flex 4 as it is performing in flex3?
CODE:
/* When click on column chart */
private function chartDrillDown(e:ChartItemEvent):void
{var colsr:ColumnSeries;
    If (chkEquipmentBreakdown.selected) Then
       {    loadBreakdownDataForMonth((e.hitData.chartItem.index)+1);
                     IsMonthly=true;
    Else
            DrillState=e;
              DrillLevel= DrillLevel==0?1:0;   
                  if(DrillLevel==1)
                  {chkDEMO.selected=false;
                        LastValidatedBox.visible=false;
                      siteid = e.hitData.item.VLD_SITE_ID;
                     var obj:Object=e.hitData.item;
            colsr = ColumnSeries(e.hitData.element)
                     strassetname = obj[strTitleField].toString();
                     drillToIndex = e.hitData.item.VLD_SITE_ID;
                    viewequivalentBreakdown();
                    fromAssetToMonthly=true;
                    loadMonthlyData(siteid);
        Else
                  {     if(fromAssetToMonthly==true)
     DrillLevel=DrillLevel==1?0:1;
                      else
                        LastValidatedBox.visible=true;
            colsr = ColumnSeries(e.hitData.element)
                       siteid="-1";
                       ShowHideEquipmentBreakdown(false);
                        loadYearlyData();
            If (IsMonthly) Then
                              onchkEquipmentBreakdownChange();
                        IsMonthly=false;
/* Bind data To column chart */
private function onDataLoadComplete(event:ResultEvent):void
{                                   webServ.removeEventListener(ResultEvent.RESULT,onDataLoadComplete);                
                  var resultArr:Array = event.result.toString().split("^");
                  xmlData = new XML(resultArr[0]);
                  xmlSeries= new XML(resultArr[1]);              
                  xmlColumns=new XML(resultArr[2]);
                  if(resultArr[3]!=null)
                  {     xmlValidatedData = new XML(resultArr[3]);
                        arrSeries=createSeries(xmlSeries,xmlValidatedData);
    Else
                        arrSeries=creatSeries(xmlSeries);
                  //chart properties
                  //arrSeries=creatSeries(xmlSeries);
                  colChart.series=arrSeries;
                arrcalc=arrSeries;
                  /*if equipment break down check box checked*/
        If (chkEquipmentBreakdown.selected) Then
                  {colChart.type="stacked";
        Else
                        colChart.type="clustered";
                  colChart.dataProvider=xmlData.Table;
                  cursorManager.removeBusyCursor();
/* function for load the step 1 and 3 "monthly stack chart".*/
private function onchkEquipmentBreakdownChange():void
                  colsrs.setStyle("showDataEffect", zoomOut);    
    If (chkEquipmentBreakdown.selected) Then
                  {  GHGDemo.visible=false;
                        AtmosBox.visible=false;
                        chkCompareYear.enabled=false;
                        cursorManager.setBusyCursor();
                        webServ.addEventListener(ResultEvent.RESULT, onDataLoadComplete);
                        if(strTitle==strTitle1)
                              if(GHGGROSS.selected==true)
                                    webOper = webServ.getOperation("LoadGHGDataMonthlyBreak") as Operation;
                webOper.send(userid,selectedYear,siteid);
            Else
                                    webOper = webServ.getOperation("LoadGHGMonthlyBreak") as Operation;
                webOper.send(userid,selectedYear,siteid);
/* function for load the step 2 "Monthly chart".*/
  private function loadBreakdownDataForMonth(monthnum:int):void
      {   var dayNum:uint = monthnum;
            cursorManager.setBusyCursor();
                  webServ.addEventListener(ResultEvent.RESULT, onDataLoadComplete);
                  var atmosflag:Boolean;
                  var ghggrossflag:Boolean;
                  atmosflag=false;
                  ghggrossflag=false;
                  if(strTitle==strTitle1)
                              if(GHGGROSS.selected==true)
                                    webOper = webServ.getOperation("LoadGHGDataMonthWiseGross") as Operation;
                        webOper.send(userid,selectedYear,siteid,monthnum);
                                    ghggrossflag=true;
        Else
                                    webOper = webServ.getOperation("LoadGHGBreakDownDataMonthWiseNet") as Operation;
                       webOper.send(userid,selectedYear,siteid,monthnum);
<mx:ColumnChart id="colChart" itemClick="chartDrillDown(event)"  dataTipFunction="dtFunc">
        <mx:horizontalAxis>
           <mx:CategoryAxis  id="catAxis"  />
                  </mx:horizontalAxis>
            <mx:verticalAxis>
              <mx:LinearAxis id="lnrAxis" baseAtZero="true" minimum="0" title="" labelFunction="defineVerticalLabel"/>
            </mx:verticalAxis>     
            <mx:horizontalAxisRenderers>
            <mx:AxisRenderer   axis="{catAxis}" labelRotation="45">
            </mx:AxisRenderer>
      </mx:horizontalAxisRenderers>
  </mx:ColumnChart>    

Answer 1

Thanks for your reply,
I am using the Adobe flash builder 4 and the Adobe flash player 10. To upgrade from flex 3 to flex 4 I just opened the project in flex 4.I am using the default skins/themes of Adobe flash builder 4.
But it is not working as flex 3. Please suggest some other option.
Thanks...