Hello everyone. In this post, I’ll be showing you how to include the Syncfusion Charts control in a Xamarin.Forms application and configure the elements of a chart.

The Syncfusion Charts control includes more than 30 chart types ranging from basic charts to financial charts. In this tutorial, I am going to use a bar chart to compare a sales target to actual sales, as shown in the following picture.

Target vs. Sale bar chart in a Xamarin.Forms app

Install NuGet package

I have already created a brand new Xamarin.Forms project in Visual Studio 2017 and added the model and view model classes to store the sales details.

Added SalesInfo model class

SaleInfo is the model class. It represents a data point in a chart and contains three properties to store year, sale, and target amounts. SalesViewModel is the view model where the SalesData property is declared to store the SaleInfo objects. Now, let’s add the SfChart NuGet from nuget.org:

1. Click Manage NuGet Packages for Solution.

Choosing NuGet Packages for Solution

2. Search for SfChart in the search bar. This is the package that needs to be installed in all Xamarin.Forms projects.

3. Click Install. You’ll need to read and accept the license to finish installing.

The SfChart NuGet package will now be installed in all your Xamarin.Forms projects.

Initialize the chart and axis

Now, let’s configure the chart on the main page of the project:

1. First, set the binding context to bind the data between the ViewModel and the View. The ViewModel in this case will be SalesViewModel.

2. Next, add the namespace of Syncfusion chart on this page to access the SfChart classes. The SfChart class is available inside the Syncfusion.SfChart.XForms namespace.

Adding the namespace

3. Then, create an instance of SfChart using the alias name of the SfChart namespace we declared before.

4. Finally, define the x and y axes using the PrimaryAxis and SecondaryAxis properties:

a. The x-axis will show the years as a string, so set the CategoryAxis to the PrimaryAxis property.

b. The y-axis will show the amount, as it is a double value, so set a NumericalAxis to the SecondaryAxis property.

Defining the axes

Since the series has not been added to the chart, the numerical axis is rendered with its default range of 0 to 1, and the category axis does not have any default labels.

Add series

Next, we need to add the series to visualize the data. As I am going to compare the target and sales values, two column series need to be added to the chart to visualize those values:

1. Add the first column series and bind the data from the ViewModel using the ItemsSource property. The SalesData property is declared in the ViewModel class.

2. The XBindingPath and YBindingPath properties are used to map the properties to fetch the values from the model object. Set the XBindingPath path to Year and the YBindingPath to Target. These properties are declared in the model object.

Now you can see the bar chart of target values in previewer. The Android and iOS platforms will display the same output.

Adding the first column series

Let’s add one more column series to visualize the sales values:

1. Pull the sales data from the same binding context as before.

2. Set the XBindingPath to Year, and the YBindingPath to Sale for this series.

The preview will update and show both series side by side.

Showing both columns

Add a title and legend

Then, to make this chart more meaningful, let’s configure the title and legend to represent each series:

1. Set an instance of ChartTitle to the Title property of SfChart. The title will be Target vs Sale.

2. Enable the legend using the Legend property of SfChart. The empty legend icons are added to the chart with different colors identifying the series. But we need labels to tell us what the colors represent.

3. Configure the labels using the Label property in each of the column series. We’ll name the first series Target and second series Sale.

Configuring the legend labels

Customize the axis

Now let’s customize the axis by setting the title and format of the labels. We’ll set the title as Year for the primary axis using the Title property of CategoryAxis.

Displaying a primary axis title

Once you save the changes, the previewer refreshes and shows the primary axis title, as seen in the previous image.

Then, let’s format the labels of the y-axis to show the dollar ($) symbol and represent the numbers in terms of millions. We can use the LabelStyle property to customize the axis labels. Set an instance of ChartAxisLabelStyle to the LabelStyle property. Format the label with the dollar sign, three-digit values, and M symbols. The previewer will update, and everything should look like the following image.

Formatting the y-axis labels

You can now run this on an Android phone to see that the chart looks just like the one in the previewer.

Deploy for iOS

Now we want to run the same app in an iPhone simulator. Before running it on an iOS platform, though, we need to take one additional step in the iOS project to load the assemblies of the renderer projects:

1. In the Solution Explorer, go to the iOS project and open the App.Delegate.cs file.

2. Inside the FinishedLaunching method, and after invoking the Xamarin.Forms Init method, call the Init method of SfChartRenderer.

3. Then, set the iOS project as the startup project.

Deploying to iOS

When you test this, you can see we get the same output on an iPhone without implementing anything specific to iOS.

Deploy for UWP

Lastly, we’ll deploy this app in the UWP platform to make sure that we are getting the same appearance of the chart there, too. We just set the UWP project as the startup project and run it in the local machine.

Once again, we get the same output without having to use any platform-specific code. This is the actual output of Xamarin.Forms Charts in a UWP application.

The chart in a UWP app

I hope this post was helpful in getting you started with the Charts control in Xamarin.Forms. If you have any requests for our next tutorial, please share them in the comments section below.

If you like this post, we think you’ll also enjoy:

[Ebook] Xamarin.Forms Succinctly

[Blog] What’s New in 2019 Volume 1: Xamarin Highlights

[Blog] What’s New in Xamarin.Forms 4.0

The post How to Display Data with Xamarin Charts appeared first on Syncfusion Blogs.