Implement a Legend Control for a PieSeries

This topic shows how to implement a RadLegendControl for a PieChart with a PieSeries.

Example

Examples 1, 2 and 3 show how to populate a PieSeries with data and display a RadLegendControl.

Example 1: Defining the model

public class Data 
{ 
    public int Amount { get; set; } 
 
    public string Category { get; set; } 
} 

Example 2: Populating with data

string[] category = new string[5] { "Paper", "Wood", "Cloth", "Glass", "Metal" }; 
this.chart.DataContext = Enumerable.Range(1, 5).Select(x => new Data { Amount = 10 * x, Category = category[x - 1] }).ToList(); 

Example 3: Defining the RadPieChart and RadLegendControl

<Grid xmlns:telerikChart="using:Telerik.UI.Xaml.Controls.Chart" 
      xmlns:telerikPrimitives="using:Telerik.UI.Xaml.Controls.Primitives"> 
    <telerikChart:RadPieChart x:Name="chart" PaletteName="DefaultDark" Width="250" Height="250"> 
        <telerikChart:PieSeries ItemsSource="{Binding}" RadiusFactor="0.8"> 
            <telerikChart:PieSeries.ValueBinding> 
                <telerikChart:PropertyNameDataPointBinding PropertyName="Amount"/> 
            </telerikChart:PieSeries.ValueBinding> 
            <telerikChart:PieSeries.LegendTitleBinding > 
                <telerikChart:PropertyNameDataPointBinding PropertyName="Category"/> 
            </telerikChart:PieSeries.LegendTitleBinding> 
        </telerikChart:PieSeries> 
    </telerikChart:RadPieChart> 
    <telerikPrimitives:RadLegendControl LegendProvider="{Binding ElementName=chart}" > 
        <telerikPrimitives:RadLegendControl.ItemsPanel> 
            <ItemsPanelTemplate> 
                <StackPanel Orientation="Vertical"/> 
            </ItemsPanelTemplate> 
        </telerikPrimitives:RadLegendControl.ItemsPanel> 
        <telerikPrimitives:RadLegendControl.ItemTemplate> 
            <DataTemplate> 
                <StackPanel Orientation="Horizontal"> 
                    <Ellipse Fill="{Binding Fill}" Stroke="{Binding Stroke}" 
                             StrokeThickness="1" Width="10" Height="10"/> 
                    <TextBlock Text="{Binding Title}" Foreground="{Binding Fill}" 
                               Margin="10" FontStyle="Italic"/> 
                </StackPanel> 
            </DataTemplate> 
        </telerikPrimitives:RadLegendControl.ItemTemplate> 
    </telerikPrimitives:RadLegendControl> 
</Grid> 

Figure 1: RadPieChart with RadLegendControl