Using Series Provider

Updated on Mar 26, 2026

This topic demonstrates how to use the ChartSeriesProvider to generate series dynamically.

At the end of the tutorial you will see a result similar to the following:

Using Collection of Series View Models

This example shows how to bind the Source property of the series provider to a collection of view model describing the chart series.

Defining the model and viewmodel

C#

public class DataPointModel
{
	public double Value { get; set; }				
	public string Category { get; set; }
}

public class SeriesModel
{
	public List<DataPointModel> GetData { get; set; }
}

Populating with data

C#

public partial class MainPage : Page
{
	private static Random r = new Random(0);

	public MainPage()
	{
		this.InitializeComponent();
		this.provider.Source = GenerateSeriesModels();
	}

	public List<DataPointModel> GenerateDataPointModels()
	{
		List<DataPointModel> data = new List<DataPointModel>();
		data.Add(new DataPointModel { Category = "Apple", Value = r.Next(1, 20) });
		data.Add(new DataPointModel { Category = "Orange", Value = r.Next(10, 30) });
		data.Add(new DataPointModel { Category = "Lemon", Value = r.Next(20, 40) });
		return data;
	}

	public List<SeriesModel> GenerateSeriesModels()
	{
		List<SeriesModel> collection = new List<SeriesModel>();
		for (int i = 0; i < 5; i++)
		{
			SeriesModel vm = new SeriesModel();
			vm.GetData = GenerateDataPointModels();
			collection.Add(vm);
		}
		return collection;
	}
}

Defining the model

XAML

<Grid xmlns:telerikChart="using:Telerik.UI.Xaml.Controls.Chart">
	<telerikChart:RadCartesianChart PaletteName="DefaultDark" >
		<telerikChart:RadCartesianChart.HorizontalAxis>
			<telerikChart:CategoricalAxis/>
		</telerikChart:RadCartesianChart.HorizontalAxis>
		<telerikChart:RadCartesianChart.VerticalAxis>
			<telerikChart:LinearAxis/>
		</telerikChart:RadCartesianChart.VerticalAxis>
		<telerikChart:RadCartesianChart.SeriesProvider >
			<telerikChart:ChartSeriesProvider x:Name="provider">
				<telerikChart:ChartSeriesProvider.SeriesDescriptors>
					<telerikChart:CategoricalSeriesDescriptor ItemsSourcePath="GetData" ValuePath="Value" CategoryPath="Category">
						<telerikChart:CategoricalSeriesDescriptor.Style>
							<Style TargetType="telerikChart:BarSeries">
								<Setter Property="CombineMode" Value="Cluster"/>
							</Style>
						</telerikChart:CategoricalSeriesDescriptor.Style>
					</telerikChart:CategoricalSeriesDescriptor>
				</telerikChart:ChartSeriesProvider.SeriesDescriptors>
			</telerikChart:ChartSeriesProvider>
		</telerikChart:RadCartesianChart.SeriesProvider>
	</telerikChart:RadCartesianChart>
</Grid>

Using Collection of Collections

This example shows how to create a collection containing collections of data point view models. The parent collection is bound to the Source of the series provider. For each child collection a new chart series is created and the collection items are used to generate chart data points.

Defining the model

C#

public class DataPointModel
{
	public double Value { get; set; }	
	public string Category { get; set; }
}

Populating with data

C#

private static Random r = new Random(0);

public MainPage()
{
	this.InitializeComponent();
	List<List<DataPointModel>> collection = new List<List<DataPointModel>>();
	for (int i = 0; i < 5; i++)
	{
		List<DataPointModel> data = new List<DataPointModel>();
		data.Add(new DataPointModel { Category = "Apple", Value = r.Next(1, 20) });
		data.Add(new DataPointModel { Category = "Orange", Value = r.Next(1, 20) });
		data.Add(new DataPointModel { Category = "Lemon", Value = r.Next(1, 20) });
		collection.Add(data);
	}
	provider.Source = collection;
}

Defining the RadCartesianChart and the ChartSeriesProvider

XAML

<telerikChart:RadCartesianChart PaletteName="DefaultDark" >
	<telerikChart:RadCartesianChart.HorizontalAxis>
		<telerikChart:CategoricalAxis/>
	</telerikChart:RadCartesianChart.HorizontalAxis>
	<telerikChart:RadCartesianChart.VerticalAxis>
		<telerikChart:LinearAxis/>
	</telerikChart:RadCartesianChart.VerticalAxis>
	<telerikChart:RadCartesianChart.SeriesProvider >
		<telerikChart:ChartSeriesProvider x:Name="provider" >
			<telerikChart:ChartSeriesProvider.SeriesDescriptors>
				<telerikChart:CategoricalSeriesDescriptor ValuePath="Value" CategoryPath="Category">
					<telerikChart:CategoricalSeriesDescriptor.Style>
						<Style TargetType="telerikChart:BarSeries">
							<Setter Property="CombineMode" Value="Cluster"/>
						</Style>
					</telerikChart:CategoricalSeriesDescriptor.Style>
				</telerikChart:CategoricalSeriesDescriptor>
			</telerikChart:ChartSeriesProvider.SeriesDescriptors>
		</telerikChart:ChartSeriesProvider>
	</telerikChart:RadCartesianChart.SeriesProvider>
</telerikChart:RadCartesianChart>