Getting Started

This example will guide you through the steps needed to add a basic RadChart control in your application.

Before you proceed, please, take a look at these articles and follow the instructions to setup your app:


If your app is setup, you are ready to add a RadChart control.

This example demonstrates how to create a basic cartesian chart with bar series like this one.

Basic RadCartesianChart Example

Here is the chart setup:

<telerikChart:RadCartesianChart x:Name="chart">
    <local:ViewModel />
    <telerikChart:CategoricalAxis />
    <telerikChart:NumericalAxis />
    <telerikChart:BarSeries CategoryBinding="Category" 
                            ItemsSource="{Binding Data}" />
var chart = new RadCartesianChart
    HorizontalAxis = new CategoricalAxis(),
    VerticalAxis = new NumericalAxis(),
    BindingContext = new ViewModel()

var series = new BarSeries();

series.SetBinding(ChartSeries.ItemsSourceProperty, new Binding("Data"));

series.ValueBinding = new PropertyNameDataPointBinding { PropertyName = "Value" };
series.CategoryBinding = new PropertyNameDataPointBinding { PropertyName = "Category" };


You also need to add the following namespace:

using Telerik.XamarinForms.Chart;

And here is the sample data used as binding context:

public class ViewModel
    public ViewModel()
        this.Data = GetCategoricalData();

    public ObservableCollection<CategoricalData> Data { get; set; }

    private static ObservableCollection<CategoricalData> GetCategoricalData()
        var data = new ObservableCollection<CategoricalData>  {
            new CategoricalData { Category = "A", Value = 0.63 },
            new CategoricalData { Category = "B", Value = 0.85 },
            new CategoricalData { Category = "C", Value = 1.05 },
            new CategoricalData { Category = "D", Value = 0.96 },
            new CategoricalData { Category = "E", Value = 0.78 },

        return data;

Here is how the business model is defined:

public class CategoricalData
    public object Category { get; set; }

    public double Value { get; set; }

SDK Browser and QSF applications contain different examples that show RadChart's main features. You can find the applications in the Examples and QSF folders of your local Telerik UI for Xamarin installation.

See Also

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article