Binding Legend to Chart

Updated on Mar 26, 2026

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

C#

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

C#

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

XAML

<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

C#

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

Populating the Pie chart with data

C#

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

XAML

<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