0 Replies Latest reply on Jul 9, 2013 3:44 AM by PieChart Callout labelpos

    Flex piechart callout labelposition is having problems with long lables.

    PieChart Callout labelpos

      Flex piechart callout labelposition is having problems with long lables.

      While shrinking the chart the left side labels are overlapping with the lines indiacating the slice.

       

      Please find the attached image.

       

      pieChartBug.png

      <?xml version="1.0"?>
      <!-- Simple example to demonstrate the PieChart control. -->
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
      <mx:Script>
        <![CDATA[         
         import mx.collections.ArrayCollection;
        
         [Bindable]
         private var medalsAC:ArrayCollection = new ArrayCollection( [
          { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
          { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
          { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
          { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
          { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
         
          { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
          { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
         
          { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
          { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
          { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
          { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]);
        
         private function displayGold(data:Object, field:String, index:Number, percentValue:Number):String {
          var temp:String= (" " + percentValue).substr(0,6);
          return data.Country + ": " +  "ffg dgfff ff fgf ff dfd sdd dddfTotal Gold: " + data.Gold +  temp + "%";
         }
        ]]>
      </mx:Script>

      <!-- Define custom colors for use as pie wedge fills. -->
      <mx:SolidColor id="sc1" color="blue" alpha=".6"/>
      <mx:SolidColor id="sc2" color="red" alpha=".6"/>
      <mx:SolidColor id="sc3" color="0x663300" alpha=".6"/>
      <mx:SolidColor id="sc4" color="blue" alpha=".6"/>
      <mx:SolidColor id="sc5" color="blue" alpha=".6"/>
      <mx:SolidColor id="sc6" color="blue" alpha=".6"/>
      <mx:SolidColor id="sc7" color="blue" alpha=".6"/>
      <mx:SolidColor id="sc8" color="blue" alpha=".6"/>
      <mx:SolidColor id="sc9" color="blue" alpha=".6"/>
      <mx:SolidColor id="sc10" color="blue" alpha=".6"/>

      <mx:SolidColor id="sc11" color="blue" alpha=".6"/>
      <mx:SolidColor id="sc12" color="blue" alpha=".6"/>
      <mx:SolidColor id="sc13" color="blue" alpha=".6"/>
      <mx:SolidColor id="sc14" color="blue" alpha=".6"/>
      <mx:SolidColor id="sc15" color="blue" alpha=".6"/>
      <mx:SolidColor id="sc16" color="blue" alpha=".6"/>

      <!-- This Stroke is used for the callout lines. -->
      <mx:Stroke id="callouts" weight="2" color="0x999999" alpha=".8" caps="square"/>

      <!-- This Stroke is used to separate the wedges in the pie. -->
      <mx:Stroke id="radial" weight="1" color="0xFFFFCC" alpha=".3"/>

      <!-- This Stroke is used for the outer border of the pie. -->
      <mx:Stroke id="pieborder" color="0x000000" weight="2" alpha=".5"/>

      <mx:HDividedBox liveDragging="true" width="100%">
       


      <mx:Panel title="Olympics 2004 Medals Tally Panel" height="100%" width="80%">
        <mx:PieChart id="chart"
            height="100%"
            width="100%"
            paddingRight="5"
            paddingLeft="5"
            showDataTips="true"
            dataProvider="{medalsAC}"
            >         
         <!--
         -->
         <mx:series>
          <mx:PieSeries
           nameField="Country"
           labelPosition="callout"
           field="Gold"
           labelFunction="displayGold"
           calloutStroke="{callouts}"
           radialStroke="{radial}"
           calloutGap="0"
           insideLabelSizeLimit="25"
           textAlign="left"
           horizontalCenter="absolute"

          
           stroke="{pieborder}"
           fills="{[sc1, sc2, sc3,sc4, sc5, sc6,sc7, sc8, sc9,sc10, sc11, sc12,sc13, sc14, sc15]}"
           >
           <!-- Clear the drop shadow filters from the chart. -->
           <mx:filters>
            <mx:Array/>
           </mx:filters>
          </mx:PieSeries>
         </mx:series>
        </mx:PieChart> 
        <mx:Legend dataProvider="{chart}"/>
      </mx:Panel>
       
        <mx:Panel title="l" height="100%" width="20%">
         <mx:Label text="Olympics 2004 Medals Tally Pane"/>
         </mx:Panel>
      </mx:HDividedBox>
      </mx:Application>

       

      THanks

      Sangith S.