Telerik UI for Windows Phone by Progress

Pie Series

The PieSeries are special series that are used to visualize data in the pie chart. Like all other series the pie series uniquely visualize its data point collection by representing different data points with pie slices. The sweep of a pie slices is directly proportional to the magnitude of the raw data point’s value.

The pie series can be customized with the following properties: LabelOffset, LabelTemplate, AngleRange and ShowLabels. LabelOffset determines how far from the center will the labels be positioned. LabelTemplate determines the visual tree of the labels, AngleRange determines if the chart will drawn as a full circle or a partial circle if required and ShowLabels hides and shows the labels as the name implies. It is important to note that the pie series are valid only in the context of RadPieChart. It makes no sense to use the pie series with RadCartesianChart because they have no relation to the axes, the pie slices represent data in one dimension contrasting with the other series which represent data in two dimensions.

Here is an example of how to create a pie chart with pie series populated with data. Notice how each data point is styled. Since internally the pie slices are drawn with a Path objects, there is a collection of styles in which each style should target the Path type and specify values for the Path's properties. In the example below only the fill of the path is set but more settings can easily be specified by adding more setters:

           <Style TargetType="Path">
              <Setter Property="Fill" Value="Orange"/>

           <Style TargetType="Path">
              <Setter Property="Fill" Value="Gray"/>

           <Style TargetType="Path">
              <Setter Property="Fill" Value="Cyan"/>

           <Style TargetType="Path">
              <Setter Property="Fill" Value="Purple"/>

           <Style TargetType="Path">
              <Setter Property="Fill" Value="Green"/>

           <chartEngine:PieDataPoint Value="10"/> 
           <chartEngine:PieDataPoint Value="4"/>
           <chartEngine:PieDataPoint Value="7"/>
           <chartEngine:PieDataPoint Value="11"/>
           <chartEngine:PieDataPoint Value="15"/>