Getting Started with Xamarin.iOS Charts (SfChart)

30 Nov 20229 minutes to read

This section explains you the steps required to populate the Chart with data, title, add data labels and tooltips to the Chart. This section covers only the minimal features that you need to know to get started with the Chart.

Adding Chart Reference

After installing Essential Studio for Xamarin, you can find all the required assemblies in the installation folders,

{Syncfusion Essential Studio Installed location}\Essential Studio\25.1.35\Xamarin\lib

Eg: C:\Program Files (x86)\Syncfusion\Essential Studio\25.1.35\Xamarin\lib

NOTE

Assemblies can be found in unzipped package location in Mac

NuGet configuration

To install the required NuGet for the SfChart control in the application, configure the NuGet packages of the Syncfusion components.

Refer to the following KB to configure the NuGet packages of the Syncfusion components:

How to upgrade the newer versions of NuGet package

The following NuGet package should be installed to use the SfChart control in the application.

Project	Required package
Xamarin.iOS	Syncfusion.Xamarin.SfChart.IOS

Adding SfChart reference

Syncfusion Xamarin components are available in nuget.org. To add SfChart to your project, open the NuGet package manager in Visual Studio, and search for Syncfusion.Xamarin.SfChart.IOS, and then install it.

To know more about obtaining our components, refer to this link. Also, you have to add the following assembly reference to the Xamarin.iOS project mentioned in the table below.

Project	Required assemblies
Xamarin.iOS	Syncfusion.SFChart.iOS.dll

IMPORTANT

Starting with v16.2.0.x, if you reference Syncfusion assemblies from trial setup or from the NuGet feed, you also have to include a license key in your projects. Please refer to this link to know about registering Syncfusion license key in your Xamarin application to use our components.

Initialize Chart

You can add SFChart to storyboard from toolbox and preview the output in designer. The other elements of the chart such as axis, series, and legend can be customized using C# code.

Import the SFChart namespace as shown below in your respective Page,

C#

using Syncfusion.SfChart.iOS;

Then initialize an empty chart with PrimaryAxis and SecondaryAxis as shown below,

C#

public override void ViewDidLoad ()
{
    base.ViewDidLoad ();

    //Initialize the Chart with required frame. This frame can be any rectangle, which bounds inside the view.
    SFChart chart = new SFChart ();
    chart.Frame   = this.View.Frame;

    //Adding Primary Axis for the Chart.
    SFCategoryAxis primaryAxis = new SFCategoryAxis ();
    chart.PrimaryAxis          = primaryAxis;

    //Adding Secondary Axis for the Chart.
    SFNumericalAxis secondaryAxis = new SFNumericalAxis ();
    chart.SecondaryAxis           = secondaryAxis; 

    this.View.AddSubview (chart);
}

Run the project and check if you get following output to make sure you have configured your project properly to add SFChart.

Populate Chart with data

To visualize the comparison of person heights in chart data, create an instance of SFColumnSeries, add it to the Series collection property of SFChart, and then set actual Data collection to the ItemsSource property of SFSeries as demonstrated in the following code snippet..

NOTE

You need to get the Name and Height values in Data collection to SFColumnSeries by setting XBindingPath and YBindingPath with respective field names to plot the series.

C#

//Initializing primary axis
SFCategoryAxis primaryAxis = new SFCategoryAxis();

primaryAxis.Title.Text = new NSString("Name");

chart.PrimaryAxis = primaryAxis;

//Initializing secondary Axis
SFNumericalAxis secondaryAxis = new SFNumericalAxis();

secondaryAxis.Title.Text = new NSString("Height (in cm)");

chart.SecondaryAxis = secondaryAxis;

ObservableCollection<ChartData> Data = new ObservableCollection<ChartData>()
{
    new ChartData { Name = "David", Height = 180 },
    new ChartData { Name = "Michael", Height = 170 },
    new ChartData { Name = "Steve", Height = 160 },
    new ChartData { Name = "Joel", Height = 182 }
};
            

//Initializing column series
SFColumnSeries series = new SFColumnSeries();

series.ItemsSource = Data;

series.XBindingPath = "Name";

series.YBindingPath = "Height";

chart.Series.Add(series);

C#

public class ChartData   
{   
    public string Name { get; set; }

    public double Height { get; set; }
}

Add Title

You can add title to chart to provide quick information to the user about the data being plotted in the chart. You can set title using SFChart.Title property as shown below.

C#

chart.Title.Text = "Chart";

Refer this link to learn more about the options available in SfChart to customize chart title.

Enable data labels

You can add data labels to improve the readability of the chart. This can be achieved using SFSeries.DataMarker property as shown below.

C#

series.DataMarker.ShowLabel = true;

Refer this link to learn more about the options available in SfChart to customize data markers.

Enable legend

You can enable legend using SFChart.Legend property as shown below,

C#

chart.Legend.Visible = true;

Additionally, you need to set label for each series using SFSeries.Label property, which will be displayed in corresponding legend.

C#

series.Label = "Heights";

Refer this link to learn more about the options available in SfChart to customize legend.

Enable tooltip

Tooltips are used to show information about the segment, when you tap on the segment. You can enable tooltip by setting SFSeries.EnableTooltip property to true.

C#

series.EnableTooltip = true;

Refer this link to learn more about the options available in SfChart to customize tooltip.

The following code example gives you the complete code of above configurations.

C#

using Syncfusion.SfChart.iOS;

namespace Chart_GettingStarted
{
	public partial class ViewController : UIViewController
	{
		public override void ViewDidLoad()
		{
			base.ViewDidLoad();

			//Initialize the Chart with required frame. This frame can be any rectangle, which bounds inside the view.
			SFChart chart = new SFChart();
			chart.Title.Text = "Chart";
			chart.Frame = this.View.Frame;
            
			//Adding Primary Axis for the Chart.
			SFCategoryAxis primaryAxis = new SFCategoryAxis();
			primaryAxis.Title.Text = new NSString("Name");
			chart.PrimaryAxis = primaryAxis;

			//Adding Secondary Axis for the Chart.
			SFNumericalAxis secondaryAxis = new SFNumericalAxis();
			secondaryAxis.Title.Text = new NSString("Height (in cm)");
			chart.SecondaryAxis = secondaryAxis;
            
            ObservableCollection<ChartData> Data = new ObservableCollection<ChartData>()
            {
                new ChartData { Name = "David", Height = 180 },
                new ChartData { Name = "Michael", Height = 170 },
                new ChartData { Name = "Steve", Height = 160 },
                new ChartData { Name = "Joel", Height = 182 }
            };

			//Initializing column series
			SFColumnSeries series = new SFColumnSeries();
			series.ItemsSource = Data;
			series.XBindingPath = "Name";
			series.YBindingPath = "Height";
			
			series.DataMarker.ShowLabel = true;
			series.Label = "Heights";
			series.EnableTooltip = true;
			
			chart.Series.Add(series);
			chart.Legend.Visible = true;
			this.View.AddSubview(chart);
		}
}

The following output is displayed as a result of the above code example.

You can find the complete getting started sample from this here.