In addition, we should add the following code to the specified project files:



Android - MainActivity.cs







iOS - AppDelegate.cs







You also have to create the following instances in the beginning of the FinishedLaunching() method:







WinPhone - MainPage.xaml.cs













Setting Up a New Page

Let’s create the page the Chart will reside in. Right-click on the Portable Class Library project > Add > New Item... > choose Forms Xaml Page. Let’s call it MainPage. Modify the GetMainPage() method in the App.xaml.cs file to set the newly created page as a front page of the application.

Set up the page background color as shown below.



Let’s first prepare the data. As I implied earlier, the view-model code base is common for Chart, regardless of the mobile platform it runs on. For the purposes of our demo, let’s have a list with categorical data:

We can now set up the Chart in XAML, or we can do it in the code behind. Let’s see how we can do this in the code behind below.

Setting up Telerik Chart for Xamarin

Axes and Series

In the code behind of the MainPage, using the Telerik.XamarinForms.Chart namespace, create a RadCartesianChart instance and add a categorical axis making it the horizontal axis, and a numerical axis making it the vertical axis. Add a Bar series, and set the content of the page to be the Chart:





Populating with Data

What this chart would be without data? Let’s fill it with the sample data we created in the view-model:

Grid

One could get better interpretation for data if its shown on a grid background, so let’s add a grid using the Xamarin.Forms namespace:

Annotations

For pointing out specific metrics that the chart gives, we can use band and line annotations. In this case, let’s take the data average and display it on the chart:

This is it! You can download demo project from Github. Note, that it needs the UI for Xamarin product to run.

Download UI for Xamarin from here, if you haven’t done so already. In the UI for Xamarin package, you will find a complimentary demo project with many examples demonstrating the Telerik Chart for Xamarin.

Happy coding!