Binding Legend to Chart

The legend control can be bound to the chart using the LegendProvider property. This article shows how to use the property with a Cartesian and Pie charts.

Binding to CartesianChart

Defining the Cartesian data point model

public class BodyWeight 
{ 
    private static Random r = new Random();  
    public DateTime EntryDateTime { get; set; }  
    public double Weight { get; set; } 
 
    public static ObservableCollection<BodyWeight> GetWeightList() 
    { 
        return new ObservableCollection<BodyWeight> 
        { 
            new BodyWeight { EntryDateTime = DateTime.Now, Weight = r.Next(50, 60) }, 
            new BodyWeight { EntryDateTime = DateTime.Now.AddDays(1), Weight = r.Next(50, 60) }, 
            new BodyWeight { EntryDateTime = DateTime.Now.AddDays(2), Weight = r.Next(50, 60) }, 
            new BodyWeight { EntryDateTime = DateTime.Now.AddDays(3), Weight = r.Next(50, 60) }, 
            new BodyWeight { EntryDateTime = DateTime.Now.AddDays(4), Weight = r.Next(50, 60) }, 
            new BodyWeight { EntryDateTime = DateTime.Now.AddDays(5), Weight = r.Next(50, 60) } 
        }; 
    } 
} 

Defining the Cartesian chart view model

public class MainViewModel 
{ 
    public MainViewModel() 
    { 
        this.Data1 = BodyWeight.GetWeightList(); 
        this.Data2 = BodyWeight.GetWeightList(); 
    } 
 
    public ObservableCollection<BodyWeight> Data1 { get; set; }  
    public ObservableCollection<BodyWeight> Data2 { get; set; } 
} 

Defining the RadCartesianChart and RadLegendControl

<Grid xmlns:telerikChart="using:Telerik.UI.Xaml.Controls.Chart" 
      xmlns:telerikPrimitives="using:Telerik.UI.Xaml.Controls.Primitives"> 
    <telerikChart:RadCartesianChart x:Name="chart"> 
        <telerikChart:RadCartesianChart.DataContext> 
            <local:MainViewModel/> 
        </telerikChart:RadCartesianChart.DataContext>            
        <telerikChart:RadCartesianChart.Grid> 
            <telerikChart:CartesianChartGrid MajorLinesVisibility="XY"/> 
        </telerikChart:RadCartesianChart.Grid> 
        <telerikChart:RadCartesianChart.VerticalAxis> 
            <telerikChart:LinearAxis/> 
        </telerikChart:RadCartesianChart.VerticalAxis> 
        <telerikChart:RadCartesianChart.HorizontalAxis> 
            <telerikChart:DateTimeCategoricalAxis LabelFormat="{}{0:dd-MMM}" DateTimeComponent="Day"/> 
        </telerikChart:RadCartesianChart.HorizontalAxis> 
 
        <telerikChart:AreaSeries ValueBinding="Weight" CategoryBinding="EntryDateTime"  
                                 ItemsSource="{Binding Data1}" CombineMode="Stack" LegendTitle="Data 1" /> 
        <telerikChart:AreaSeries ValueBinding="Weight" CategoryBinding="EntryDateTime"  
                                 ItemsSource="{Binding Data2}"  CombineMode="Stack" LegendTitle="Data 2" /> 
    </telerikChart:RadCartesianChart>         
    <telerikPrimitives:RadLegendControl LegendProvider="{Binding ElementName=chart}"/> 
</Grid> 

RadCartesianChart and RadLegendControl

Binding to PieChart

Defining the Pie data point model

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

Populating the Pie chart 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(); 

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"> 
        <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> 

RadPieChart with RadLegendControl