Question

I’m working with the PieChart and PieSeries components in Flex, and have ran into an issue. When the labelPosition property of a PieSeries is set to ‘inside’ and there is only one slice in the pie, the label doesn’t get displayed.

Looking at the docs, I’m guessing its some quirk related to when inside labels are removed. The doc reads as:

Draw labels inside the chart, centered approximately seven tenths of the way along each wedge. Shrink labels to ensure that they do not interfere with each other. If labels are shrunk below the calloutPointSize property, remove them. When two labels overlap, Flex gives priority to labels for larger slices.

One work around is to detect 1 slice and add another element to the dataProvider with a zero value, but the displayed label is still not where I’d like it, and there doesn’t seem to be a way to move it.

Another solution would be to wrap the PieChart with a canvas and just render text on top in the same format as I use for labels, but I would really prefer to not have to go this route (including rendering text on the chart’s canvas, which might be slightly less of a hack, but still a hack).

Here is some code demonstrating my issue:

<?xml version='1.0' encoding='utf-8'?> <mx:Application   xmlns:mx='http://www.adobe.com/2006/mxml'   layout='vertical'   backgroundColor='white'   >    <mx:Script>     <![CDATA[       import mx.collections.ArrayCollection;       [Bindable] public var pieData:ArrayCollection = new ArrayCollection([         {value: 50, label: 'This is a\nlong label'}       ]);       [Bindable] public var pieData2:ArrayCollection = new ArrayCollection([         {value: 50, label: 'This is a\nlong label'},         {value: 0, label: ''}       ]);     ]]>   </mx:Script>    <mx:HBox     width='100%'     height='100%'     >     <mx:PieChart       width='100%'       height='100%'       >       <mx:series>         <mx:PieSeries           dataProvider='{ pieData }'           field='value'           labelField='label'           labelPosition='callout'           />       </mx:series>     </mx:PieChart>     <mx:PieChart       width='100%'       height='100%'       >       <mx:series>         <mx:PieSeries           dataProvider='{ pieData }'           field='value'           labelField='label'           labelPosition='insideWithCallout'           />       </mx:series>     </mx:PieChart>     <mx:PieChart       width='100%'       height='100%'       >       <mx:series>         <mx:PieSeries           dataProvider='{ pieData }'           field='value'           labelField='label'           labelPosition='inside'           />       </mx:series>     </mx:PieChart>   </mx:HBox>    <mx:HBox     width='100%'     height='100%'     >     <mx:PieChart       width='100%'       height='100%'       >       <mx:series>         <mx:PieSeries           dataProvider='{ pieData2 }'           field='value'           labelField='label'           labelPosition='callout'           />       </mx:series>     </mx:PieChart>     <mx:PieChart       width='100%'       height='100%'       >       <mx:series>         <mx:PieSeries           dataProvider='{ pieData2 }'           field='value'           labelField='label'           labelPosition='insideWithCallout'           />       </mx:series>     </mx:PieChart>     <mx:PieChart       width='100%'       height='100%'       >       <mx:series>         <mx:PieSeries           dataProvider='{ pieData2 }'           field='value'           labelField='label'           labelPosition='inside'           />       </mx:series>     </mx:PieChart>   </mx:HBox>  </mx:Application> 

Has anyone encountered this problem or know of a work-around/good solution?

Answer 1

All I can do is point out this bug report, which looks to be what you’ve come across.

I’m afraid I can’t get the suggested patch to work though, maybe you’ll have better luck.