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.
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,
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);
}
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
andHeight
values inData
collection toSFColumnSeries
by settingXBindingPath
andYBindingPath
with respective field names to plot the series.
//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; }
}
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.
chart.Title.Text = "Chart";
Refer this link to learn more about the options available in SfChart
to customize chart title.
You can add data labels to improve the readability of the chart. This can be achieved using SFSeries.DataMarker
property as shown below.
series.DataMarker.ShowLabel = true;
Refer this link to learn more about the options available in SfChart
to customize data markers.
You can enable legend using SFChart.Legend
property as shown below,
chart.Legend.Visible = true;
Additionally, you need to set label for each series using SFSeries.Label
property, which will be displayed in corresponding legend.
series.Label = "Heights";
Refer this link to learn more about the options available in SfChart
to customize legend.
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.
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.
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);
}
}
}
For more details please refer this UG Xamarin.iOS SFChart.