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

Getting Started

RadChart is essentially a toolset of charting components designed to help you create a variety of rich data-visualization applications. This tutorial will walk you through the creation of a sample application that contains a RadCartesianChart component.

Chart Types

The RadChart suite provides three different chart types and each of them is designed to best fit specific use cases.

Assembly References

In order to use the RadChart suite in your projects, you have to add references to the following assembly:

  • Telerik.WinUI.Controls.dll

Defining a Chart

For demonstration purposes, this tutorial will use the RadCartesianChart component. It uses a Cartesian coordiante system to display different series and it is the most commonly used charting component. Example 1 demonstrates how to define a RadCartesianChart in XAML.

Example 1: Defining a RadCartesianChart

<Grid xmlns:telerikChart="using:Telerik.UI.Xaml.Controls.Chart"> 
    <telerikChart:RadCartesianChart /> 
</Grid> 
If you run the project at this stage, RadCartesianChart will inform you that there are no axes defined, as seen in Figure 1.

Figure 1: RadCartesianChart without its axes set

RadCartesianChart without its axes set

The Cartesian coordinate system is constructed using horizontal and vertical axes. The RadChart suite exposes different types of axes that can be combined horizontally and vertically in different ways based on the scenario. You can find more information about them in our Axis article.

Defining the Axes

Example 2 will demonstrate a common scenario with a LinearAxis as the vertical axis of the chart and a CategoricalAxis as horizontal axis.

Example 2: Defining the horizontal and vertical axes

<telerikChart:RadCartesianChart> 
    <telerikChart:RadCartesianChart.HorizontalAxis> 
        <telerikChart:CategoricalAxis/> 
    </telerikChart:RadCartesianChart.HorizontalAxis> 
    <telerikChart:RadCartesianChart.VerticalAxis> 
        <telerikChart:LinearAxis/> 
    </telerikChart:RadCartesianChart.VerticalAxis> 
</telerikChart:RadCartesianChart> 
In the cases where no series are defined in the definition of the charting components, a message will be displayed to prompt you to enter a series.

Figure 2: RadCartesianChart without any series added in its Series collection

RadCartesianChart without any series added in its Series collection

Defining a Series

The RadChart exposes a large variety of series that can be used in different scenarios. You can take a look at the Series article to find out more about the available types.

To complete the task of this tutorial, you need to define series with data points that will be rendered inside the charting component.

Example 3: Defining a BarSeries

<Grid xmlns:telerikChart="using:Telerik.UI.Xaml.Controls.Chart" 
      xmlns:telerikCharting="using:Telerik.Charting"> 
    <telerikChart:RadCartesianChart> 
        <telerikChart:RadCartesianChart.HorizontalAxis> 
            <telerikChart:CategoricalAxis/> 
        </telerikChart:RadCartesianChart.HorizontalAxis> 
        <telerikChart:RadCartesianChart.VerticalAxis> 
            <telerikChart:LinearAxis/> 
        </telerikChart:RadCartesianChart.VerticalAxis> 
 
        <telerikChart:BarSeries> 
            <telerikChart:BarSeries.DataPoints> 
                <telerikCharting:CategoricalDataPoint Category="Apples" Value="20"/> 
                <telerikCharting:CategoricalDataPoint Category="Bananas" Value="28"/> 
                <telerikCharting:CategoricalDataPoint Category="Oranges" Value="17"/> 
                <telerikCharting:CategoricalDataPoint Category="Strawberries" Value="30"/> 
            </telerikChart:BarSeries.DataPoints> 
        </telerikChart:BarSeries> 
    </telerikChart:RadCartesianChart> 
</Grid> 

Figure 3: BarSeries

BarSeries

Bind the Chart

Although you can easily populate the RadCartesianChart Series directly with DataPoint objects, in most real-life applications, you will populate the series with business data. This is why all series types expose an ItemsSource property. You can bind that property to a collection of business items. And if you use a collection that implements the INotifyCollectionChanged interface, then any changes within the business data will be immediately reflected in the appropriate RadChartView components and vice versa. You can find an example in the respective topic for each series (e.g BarSeries).

See Also

In this article
Not finding the help you need?