Controls / RadChart / Populating with Data

New to Telerik UI for WPF? Download free 30-day trial

Creating a Chart in Code-behind

RadChart provides you with API, which you can use to build the charts you need from the code-behind, without using XAML.

This tutorial will walk you through the common tasks of:

In order to use RadChart control in your projects you have to add references to Telerik.Windows.Controls.Charting.dll and to add references to the following namespaces:

using Telerik.Windows.Controls; 
using Telerik.Windows.Controls.Charting; 
using System.Windows.Controls;

Adding RadChart and Setting the DefaultView Property

The first thing you have to do is to create a new instance of the RadChart class in the code and add it to a parent control. 

private RadChart CreateChart_DefaultView() 
{ 
    RadChart telerikChart = new RadChart(); 
    return telerikChart; 
}

The ChartDefaultView contains ChartTitle, ChartLegend and ChartArea and you have to use them to build the chart in the way you need. The next several sections will show you how to set these properties.

Adding ChartTitle

After declaring the default view, the next step is to add a chart title. Find your RadChart declaration and add chart title "Year 2009" which is positioned in the center: 

private RadChart CreateChart_DefaultView() 
{ 
    RadChart telerikChart = new RadChart();    //Chart Title 
    telerikChart.DefaultView.ChartTitle.Content = "Year 2009"; 
    telerikChart.DefaultView.ChartTitle.HorizontalAlignment = HorizontalAlignment.Center; 
    return telerikChart; 
}

Adding ChartLegend

Add a ChartLegend declaration to your default view declaration. If you want the data series which is added later in the ChartArea to be automatically added in the legend, set the UseAutoGeneratedItems property is set to True. 

private RadChart CreateChart_DefaultView() 
{ 
    RadChart telerikChart = new RadChart();    //Chart Title 
    telerikChart.DefaultView.ChartTitle.Content = "Year 2009"; 
    telerikChart.DefaultView.ChartTitle.HorizontalAlignment = HorizontalAlignment.Center;    //Chart Legend 
    telerikChart.DefaultView.ChartLegend.UseAutoGeneratedItems = true; return telerikChart; 
}

Adding ChartArea

The third step in the populating a RadChart with data is adding a ChartArea.

private Telerik.Windows.Controls.RadChart CreateChart_DefaultView() 
{ 
    RadChart telerikChart = new RadChart();    //Chart Title 
    telerikChart.DefaultView.ChartTitle.Content = "Year 2009"; 
    telerikChart.DefaultView.ChartTitle.HorizontalAlignment = HorizontalAlignment.Center;    //Chart Legend 
    telerikChart.DefaultView.ChartLegend.UseAutoGeneratedItems = true;    //Line Chart 
    DataSeries lineSeries = new DataSeries(); 
    lineSeries.LegendLabel = "Turnover"; 
    lineSeries.Definition = new LineSeriesDefinition(); 
    telerikChart.DefaultView.ChartArea.DataSeries.Add(lineSeries);    //Bar Chart 
    DataSeries barSeries = new DataSeries(); 
    barSeries.LegendLabel = "Expenses"; 
    telerikChart.DefaultView.ChartArea.DataSeries.Add(barSeries); 
    return telerikChart; 
}

Adding DataSeries

The ChartArea has a list of DataSeries, where you have to add one DataSeries per the chart graphic you want to see. The DataSeries has a property Definition of type ISeriesDefinition where the chart type has to be specified - LineSeriesDefinition for line chart, BarSeriesDefinition for bar chart, etc. The last thing you have to define is the data for each DataSeries: simply add as many DataPoints as you need - one for each point of the chart.

The DataPoint class represents a single piece of data that is visualized in a chart series. For each DataPoint, you can define several values depending on the chart type: XValue and YValue, High and Low, Open and Close, etc. These values are used later to visually calculate and draw the chart graphic.

Other properties of DataPoint are the LegendLable аnd the LegendFormat. The first one specifies the text displayed in the ChartLegend related to that DataSeries, while the second one defines the format of the labels.

The code bellow defines LineSeriesDefinition, that represents the line chart showing the Turnover for the year 2009. The data is defined as DataPoints, where Y-Axis (YValue) is set with the desired value. The second data series is BarSeriesDefinition for the Expenses defined in a similar way.

private Telerik.Windows.Controls.RadChart CreateChart_DefaultView() 
{ 
    RadChart telerikChart = new RadChart();    //Chart Title 
    telerikChart.DefaultView.ChartTitle.Content = "Year 2009"; 
    telerikChart.DefaultView.ChartTitle.HorizontalAlignment = HorizontalAlignment.Center;    //Chart Legend 
    telerikChart.DefaultView.ChartLegend.UseAutoGeneratedItems = true;    //Line Chart 
    DataSeries lineSeries = new DataSeries(); 
    lineSeries.LegendLabel = "Turnover"; 
    lineSeries.Definition = new LineSeriesDefinition(); lineSeries.Add(new DataPoint() { YValue = 154, XCategory = "Jan" }); 
    lineSeries.Add(new DataPoint() { YValue = 138, XCategory = "Feb" }); 
    lineSeries.Add(new DataPoint() { YValue = 143, XCategory = "Mar" }); 
    lineSeries.Add(new DataPoint() { YValue = 120, XCategory = "Apr" }); 
    lineSeries.Add(new DataPoint() { YValue = 135, XCategory = "May" }); 
    lineSeries.Add(new DataPoint() { YValue = 125, XCategory = "Jun" }); 
    lineSeries.Add(new DataPoint() { YValue = 179, XCategory = "Jul" }); 
    lineSeries.Add(new DataPoint() { YValue = 170, XCategory = "Aug" }); 
    lineSeries.Add(new DataPoint() { YValue = 198, XCategory = "Sep" }); 
    lineSeries.Add(new DataPoint() { YValue = 187, XCategory = "Oct" }); 
    lineSeries.Add(new DataPoint() { YValue = 193, XCategory = "Nov" }); 
    lineSeries.Add(new DataPoint() { YValue = 176, XCategory = "Dec" });  
    telerikChart.DefaultView.ChartArea.DataSeries.Add(lineSeries);    //Bar Chart 
    DataSeries barSeries = new DataSeries(); 
    barSeries.LegendLabel = "Expenses"; 
    barSeries.Definition = new BarSeriesDefinition(); barSeries.Add(new DataPoint() { YValue = 45, XCategory = "Jan" }); 
    barSeries.Add(new DataPoint() { YValue = 48, XCategory = "Feb" }); 
    barSeries.Add(new DataPoint() { YValue = 53, XCategory = "Mar" }); 
    barSeries.Add(new DataPoint() { YValue = 41, XCategory = "Apr" }); 
    barSeries.Add(new DataPoint() { YValue = 32, XCategory = "May" }); 
    barSeries.Add(new DataPoint() { YValue = 28, XCategory = "Jun" }); 
    barSeries.Add(new DataPoint() { YValue = 63, XCategory = "Jul" }); 
    barSeries.Add(new DataPoint() { YValue = 74, XCategory = "Aug" }); 
    barSeries.Add(new DataPoint() { YValue = 77, XCategory = "Sep" }); 
    barSeries.Add(new DataPoint() { YValue = 85, XCategory = "Oct" }); 
    barSeries.Add(new DataPoint() { YValue = 89, XCategory = "Nov" }); 
    barSeries.Add(new DataPoint() { YValue = 80, XCategory = "Dec" });  
    telerikChart.DefaultView.ChartArea.DataSeries.Add(barSeries);  
    return telerikChart; 
}

The result is categorical chart, where on X-Axis you can see the months:

WPF RadChart

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