Create a Pie Chart with Interactive & Spinning Selection

A common problem we’re always trying to solve with mobile data visualizations is how to display as much data to the user without cluttering the UI. This is going to be an ongoing theme with many of my upcoming blog posts. In this post I will cover the built-in selection feature of FlexPie and how it can be used to create a cool, interactive spinning pie where the label remains static to one edge of the app. Xuni_FlexPie_CustomLabel In addition to tooltips, Xuni FlexPie has built-in selection capabilities where the selected slice shows a thicker border and can explode out from the pie. Using tooltips rather than data labels help keep your visualization clean of clutter by only showing one slice’s data at a time. (FlexPie supports data labels as well, if that’s what you need, but it’s not ideal for charts with many points. Static data labels are also not as distinctively mobile as touching the chart and getting visual feedback.) Xuni_FlexPie_LabelsHere are the key properties to set to customize the selection with some example values:

  • SelectedItemOffset = 0.2 (explodes the selected slice)
  • SelectedBorderWidth = 1
  • SelectedBorderColor = Red
  • SelectedDashes = 7,2 (if you want dashed lines)
  • SelectionMode = Point (by default it’s set, but this property can disable selection)

What’s unique about FlexPie is that it can also animate around so that the selected slice is always at a single position: top, left, bottom or right. One intention of this feature is that you can then provide your own label outside the control with relevant information. It’s an alternative to the built-in tooltips that provides a wilder experience. Xuni-FlexPie-Select-Animation For the spinning pie solution, try setting these key properties:

  • SelectedItemPosition = Top (turns the selection animation on)
  • SelectedItemOffset=0.2 (explodes the selected slice)
  • ShowTooltips = False (turn off the default tooltips)
  • SelectAnimation.Easing = Easing.BounceOut (optional/gives it a bounce effect)

To use SelectedItemPosition it’s actually not required to have animation as well. You could disable the animation by setting IsAnimated = False or SelectAnimation.Duration = 0. Next, I’ll show the complete C# & XAML code to create the pie spinning selection.

The Spinning Pie Chart Selection Sample Code

The code example I’m providing below is for Xamarin.Forms, though the concept could be easily applied to iOS and Android. The XAML UI layout is very concise so it’s a good model. You could easily create the same layout in Android or iOS. Below is the XAML for the ContentPage that includes our label (which is a BoxView) and our FlexPie. The triangle shape is created by using an image since Xamarin.Forms is missing shape and path elements. Of course, here you can get as creative as the platform allows with graphics and positioning. The XAML Grid I’m using has 2 rows so it’s sized quite nicely regardless of the resolution.

<ContentPage xmlns="" xmlns:x="" xmlns:xuni="clr-namespace:Xuni.Forms.FlexPie;assembly=Xuni.Forms.FlexPie" x:Class="FlexPieDemo.Data.Views.Samples.SelectionLabel">  
  <Grid RowSpacing="0">  
      <RowDefinition Height="*"/>  
      <RowDefinition Height="5*"/>  
    <BoxView Color="#2A9FD6" />  
    <StackLayout x:Name="stackLayout" HorizontalOptions="Center" VerticalOptions="Center">  
      <Label x:Name="lblFruitName" TextColor="Black" HorizontalOptions="Center"/>  
      <Label x:Name="lblFruitValue" TextColor="Black" HorizontalOptions="Center"/>  
    <xuni:FlexPie SelectedItemOffset=".2" SelectedBorderWidth="1" SelectedItemPosition="Top" SelectedDashes="0,0" ShowTooltips="false" BindingName = "Name" Binding = "Value" x:Name="flexPie" Grid.Row="1">  
    <Image x:Name="imgCalloutTip" HorizontalOptions="Center" VerticalOptions="Start" Grid.Row="1" />  

There are a few things to set in code-behind, such as the legend position, palette and the animation easing. For this sample I want the legend always at the bottom. I’m using a BounceOut easing for the SelectAnimation. This gives it the little bounce at the end, but it’s completely optional.

this.flexPie.ItemsSource = PieChartSampleFactory.CreateEntiyList();  
this.flexPie.Palette = Xuni.Forms.ChartCore.ChartPalettes.Superhero;  
this.flexPie.SelectionChanged += flexPie_SelectionChanged;  
this.flexPie.Legend.Position = Xuni.Forms.ChartCore.ChartPositionType.Bottom;  
imgCalloutTip.Source = ImageSource.FromResource("FlexPieDemo.Data.Images.bluetip.png");  
this.flexPie.SelectAnimation.Easing = Easing.BounceOut;  

Next, I’m listening to the SelectionChanged event. In this event I have access to the selected point data from which I can easily populate my custom label. My business object is named FruitEntity so within this event I can obtain the selected entity and show any of its properties in the label.

void flexPie_SelectionChanged(object sender, Xuni.Forms.FlexPie.PieSelectionChangedEventArgs e)  
    FruitEntity selectedFruit = e.HitTestInfo.DataPoint.DataObject as FruitEntity;  
    if(selectedFruit != null)  
        lblFruitName.Text = "Fruit: " + selectedFruit.Name;  
        lblFruitValue.Text = "Sold: " + selectedFruit.Value.ToString("n2");  

That’s it! You could also listen to the page’s SizeChanged event and toggle the orientation of the stack layout so that the label contents are better positioned for horizontal displays. To access the control, download the Xuni FlexPie control for your preferred platform. You can download a more simplified selection sample from GitHub as part of FlexPie101.

Greg Lutz

comments powered by Disqus