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:

Example

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">
  <telerikChart:RadCartesianChart.BindingContext>
    <local:ViewModel />
  </telerikChart:RadCartesianChart.BindingContext>
  <telerikChart:RadCartesianChart.HorizontalAxis>
    <telerikChart:CategoricalAxis />
  </telerikChart:RadCartesianChart.HorizontalAxis>
  <telerikChart:RadCartesianChart.VerticalAxis>
    <telerikChart:NumericalAxis />
  </telerikChart:RadCartesianChart.VerticalAxis>
  <telerikChart:RadCartesianChart.Series>
    <telerikChart:BarSeries CategoryBinding="Category" 
                            ValueBinding="Value" 
                            ItemsSource="{Binding Data}" />
  </telerikChart:RadCartesianChart.Series>
</telerikChart:RadCartesianChart>
var chart = new RadCartesianChart
{
    HorizontalAxis = new CategoricalAxis(),
    VerticalAxis = new NumericalAxis(),
    BindingContext = new GettingStarted.ViewModel()
};

var series = new BarSeries();

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

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

chart.Series.Add(series);

You also need to add the following namespace:

xmlns:telerikChart="clr-namespace:Telerik.XamarinForms.Chart;assembly=Telerik.XamarinForms.Chart"
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:

See Also