DoughtnutSeries

This series is visualized on the screen as separate slices representing each of the data points. The only difference from the PieSeries is that each slices is drawn with an offset from the center of the control.

Declaratively defined series

You can use the following definition to display a simple DoughnutSeries

Example 1: Declaring an DoughtnutSeries in XAML

<telerik:RadPieChart Palette="Windows8"> 
    <telerik:RadPieChart.Series> 
        <telerik:DoughnutSeries> 
            <telerik:DoughnutSeries.DataPoints> 
                <telerik:PieDataPoint Label="43.46%" Value="43.46"/> 
                <telerik:PieDataPoint Label="27.53%" Value="27.53"/> 
                <telerik:PieDataPoint Label="15.11%" Value="15.11"/> 
                <telerik:PieDataPoint Label="10.35%" Value="10.35"/> 
                <telerik:PieDataPoint Label="3.55%" Value="3.55"/> 
            </telerik:DoughnutSeries.DataPoints> 
        </telerik:DoughnutSeries> 
    </telerik:RadPieChart.Series> 
</telerik:RadPieChart> 

Figure 1: DoughtnutSeries visual appearance

radchartview-series-doughnutseries

Properties

  • ValueBinding: A property of type DataPointBinding that gets or sets the property path that determines the value of the data point.
  • AngleRange: A property of type DataPointBinding that gets or sets the property path that determines the category value of the data point.
  • RadiusFactor: A property of type double that gets or sets the radius factor used to calculate the radius of the visual series.
  • SelectedPointOffset: A property of type double that gets or sets the offset applied to a Telerik.Charting.PieDataPoint which is currently selected. This value is applied only if the point's OffsetFromCenter property is 0.
  • InnerRadiusFactor: A property of type double that gets or sets the inner radius factor (that is the space that remains empty) of the series. The value is in logical units, in the range of [0, 1].
  • DefaultSliceStyle: A property of type Style that gets the style applied to every segment in the series.

Data Binding

You can use the ValueBinding property of the DoughtnutSeries to bind the DataPoints’ properties to the properties from your view models.

Example 2: Defining the view model

public class PlotInfo 
{ 
    public double Value { get; set; } 
} 
 
//....... 
this.DataContext = new ObservableCollection<PlotInfo> 
{ 
    new PlotInfo() { Value = 43.46}, 
    //.... 
}; 

Example 3: Specify a DoughtnutSeries in XAML

<telerik:DoughtnutSeries ItemsSource="{Binding}" ValueBinding="Value" /> 

See the Create Data-Bound Chart for more information on data binding in the RadChartView suite.

Setting the Doughnut Radius

The API of the series allows you to define the radius of the doughnut visual (the circle) and also the radius of the space that remains empty (the hole).

The radiuses can be set via the RadiusFactor and InnerRadiusFactor properties of the series. The property works in relative units between 0 and 1.

RadiusFactor

RadiusFactor sets the radius of the doughnut visual. Value of 0.3 means that the pie visual will take 30% of the chart's available space.

Setting RadiusFactor to 1 means that the doughnut visual will take all the available space given from the chart control.

Setting RadiusFactor to 0.5 means that the circle (pie) will take half of the available space given from the chart control.

Setting RadiusFactor to a value bigger than 1 (ex: 1.4) will make the pie bigger than the available size.

The default value of RadiusFactor is 0.85

InnerRadiusFactor

InnerRadiusFactor sets the radius of the space that remains empty. Value of 0.3 means that the empty space will take 30% of the chart's available space.

Setting InnerRadiusFactor to 1 means that the empty space will take all available space given from the chart control.

If the InnerRadiusFactor gets bigger than the RadiusFactor, the doughnut visual will be drawn in the intersection area between the radius ranges.

Setting InnerRadiusFactor to 0.5 means that the empty space will take half of the available space given from the chart control.

Setting InnerRadiusFactor to a value bigger than 1 (ex: 1.4) will make the empty space bigger than the available size.

The default value of InnerRadiusFactor is 0.5

Example 4: Setting RadiusFactor and InnerRadiusFactor

<telerik:DoughnutSeries RadiusFactor="1" InnerRadiusFactor="0.3"> 

Figure 2: RadiusFactor of 1 (left) and 0.5 (right), and InnerRadiusFactor of 0.2 (left) and 0.3 (right)

radchartview-series-pieseries

Styling the Series

You can see how to style the series using different properties in the DoughtnutSeries section of the Customizing PieChart Series help article.

Additionally, you can use the Palette property of the chart to change the colors of the DoughtnutSeries on a global scale. You can find more information about this feature in the Palettes section in our help documentation.

See Also

In this article
Not finding the help you need? Improve this article