Getting Started

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, typically:

{Syncfusion Installed location}\Essential Studio{version number}\lib

NOTE

Assemblies are available in unzipped package location in Mac.

You have to add the following assembly reference to the iOS unified project

ios-unified\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.

SFChart Designer support in Xamarin.iOS

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.

    Initializing Xamarin.iOS Chart

    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.

    Tooltip support in Xamarin.iOS Chart

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