Xamarin.iOS-Chart-Getting-Started

This is the demo application of Xamarin.iOS SfChart control. The minimal set of required properties have been configured in this project to get started with SfChart in Xamarin.iOS platform.

Description

Initialize chart

Add reference to Syncfusion.Xamarin.SfChart.IOS NuGet and import the control namespace Syncfusion.SfChart.iOS as shown below in your respective Page.

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);
}

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..

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);

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);
	}
    }
}

Output

For more details please refer this UG Xamarin.iOS SFChart.