Creating Xamarin Charts Library - Quick Getting Started Guide
What is Xamarin Charts Library?
The Xamarin Charts library, a cross-platform charting package, it is used to create beautiful charts to mobile and desktop apps. It contains a rich gallery of 30+ charts and graphs, ranging from line to financial charts, that cater to all charting scenarios. Its high performance helps render a large amount of data quickly in your mobile and desktop devices.
The Xamarin Charts Library also comes with a lot of features such as zooming, panning, tooltip, trackball, drill-down, and events to make the charts more interactive.
In this knowledge base, we are going to provide details about how to populate the Chart with data, title, add data labels and tooltips to the Xamarin Chart Component.
How to initialize Chart
Import the SfChart namespace as shown below in your respective Page,
[XAML]
xmlns:chart="clr-namespace:Syncfusion.SfChart.XForms;assembly=Syncfusion.SfChart.XForms"
[C#]
using Syncfusion.SfChart.XForms;
Then initialize an empty chart with PrimaryAxis and SecondaryAxis as shown below,
[XAML]
<chart:SfChart> <chart:SfChart.PrimaryAxis> <chart:CategoryAxis> </chart:CategoryAxis> </chart:SfChart.PrimaryAxis> <chart:SfChart.SecondaryAxis> <chart:NumericalAxis> </chart:NumericalAxis> </chart:SfChart.SecondaryAxis> </chart:SfChart>
[C#]
SfChart chart = new SfChart(); //Initializing Primary Axis CategoryAxis primaryAxis = new CategoryAxis(); chart.PrimaryAxis = primaryAxis; //Initializing Secondary Axis NumericalAxis secondaryAxis = new NumericalAxis (); chart.SecondaryAxis = secondaryAxis; this.Content = chart;
Run the project and check if you get following output to make sure you have configured your project properly to add SfChart.
How to initialize view model
Now, let us define a simple data model that represents a data point in SfChart.
Public class Person
{
public string Name { get; set; }
public double Height { get; set; }
}
Next, create a view model class and initialize a list of Person objects as shown below,
public class ViewModel
{
public List<Person> Data { get; set; }
public ViewModel()
{
Data = new List<Person>()
{
new Person { Name = “David”, Height = 180 },
new Person { Name = “Michael”, Height = 170 },
new Person { Name = “Steve”, Height = 160 },
new Person { Name = “Joel”, Height = 182 }
};
}
}
Set the ViewModel instance as the BindingContext of your Page; this is done to bind properties of ViewModel to SfChart.
Add namespace of ViewModel class in your XAML page if you prefer to set BindingContext in XAML.
[XAML]
<ContentPage xmlns=”http://xamarin.com/schemas/2014/forms” xmlns:x=”http://schemas.microsoft.com/winfx/2009/xaml” x:Class=”ChartDemo.MainPage” xmlns:chart=”clr-namespace:Syncfusion.SfChart.Xforms;assembly=Syncfusion.SfChart.Xforms” xmlns:local=”clr-namespace:ChartDemo”> <ContentPage.BindingContext> <local:ViewModel></local:ViewModel> </ContentPage.BindingContext> </ContentPage>
[C#]
this.BindingContext = new ViewModel();
How to populate Chart with data
As we are going to visualize the comparison of heights in the data model, add ColumnSeries to SfChart.Series property, and then bind the Data property of the above ViewModel to the ColumnSeries.ItemsSource property as shown below.
You need to set XBindingPath and YBindingPath properties, so that SfChart would fetch values from the respective properties in the data model to plot the series.
[XAML]
<chart:SfChart>
<chart:SfChart.PrimaryAxis>
<chart:CategoryAxis>
<chart:CategoryAxis.Title>
<chart:ChartAxisTitle Text="Name"> </chart:ChartAxisTitle>
</chart:CategoryAxis.Title>
</chart:CategoryAxis>
</chart:SfChart.PrimaryAxis>
<chart:SfChart.SecondaryAxis>
<chart:NumericalAxis>
<chart:NumericalAxis.Title>
<chart:ChartAxisTitle Text="Height (in cm)"></chart:ChartAxisTitle>
</chart:NumericalAxis.Title>
</chart:NumericalAxis>
</chart:SfChart.SecondaryAxis>
<chart:SfChart.Series>
<chart:ColumnSeries ItemsSource="{Binding Data}" XBindingPath="Name" YBindingPath="Height">
</chart:ColumnSeries>
</chart:SfChart.Series>
</chart:SfChart>
[C#]
//Initializing primary axis CategoryAxis primaryAxis = new CategoryAxis(); primaryAxis.Title.Text = "Name"; chart.PrimaryAxis = primaryAxis; //Initializing secondary Axis NumericalAxis secondaryAxis = new NumericalAxis(); secondaryAxis.Title.Text = "Height (in cm)"; chart.SecondaryAxis = secondaryAxis; //Initializing column series ColumnSeries series = new ColumnSeries(); series.SetBinding(ChartSeries.ItemsSourceProperty, "Data"); series.XBindingPath = "Name"; series.YBindingPath = "Height"; chart.Series.Add(series);
How to 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.
[XAML]
<chart:SfChart> ... <chart:SfChart.Title> <chart:ChartTitle Text="Chart"/> </chart:SfChart.Title> ... </chart:SfChart>
[C#]
series.DataMarker = new ChartDataMarker();
Refer this link to learn more about the options available in SfChart to customize chart title.
How to enable data labels
You can add data labels to improve the readability of the chart. This can be achieved using ChartSeries.DataMarker property as shown below.
[XAML]
<chart:SfChart> ... <chart:ColumnSeries> <chart:ColumnSeries.DataMarker> <chart:ChartDataMarker/> </chart:ColumnSeries.DataMarker> </chart:ColumnSeries> ... </chart:SfChart>
[C#]
series.DataMarker = new ChartDataMarker();
Refer this link to learn more about the options available in SfChart to customize data markers.
How to enable legend
You can enable legend using SfChart.Legend property as shown below. Additionally, you need to set label for each series using ChartSeries.Label property, which will be displayed in corresponding legend.
[XAML]
<chart:SfChart>
...
<chart:SfChart.Series>
<chart:ColumnSeries Label="Heights" ItemsSource="{Binding Data}" XBindingPath="Name" YBindingPath="Height">
</chart:ColumnSeries>
</chart:SfChart.Series>
...
</chart:SfChart>
[C#]
chart.Legend = new ChartLegend ();
Refer this link to learn more about the options available in SfChart to customize legend.
How to enable tooltip
Tooltips are used to show information about the segment when you tap on the segment. You can enable tooltip by setting ChartSeries.EnableTooltip property to true.
[XAML]
<ContentPage xmlns:chart="clr-namespace:Syncfusion.SfChart.XForms;assembly=Syncfusion.SfChart.XForms"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:local="clr-namespace: ChartGettingStarted;assembly=ChartGettingStarted"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ChartGettingStarted.ChartSample">
<chart:SfChart x:Name="Chart" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<chart:SfChart.BindingContext>
<local:ViewModel/>
</chart:SfChart.BindingContext>
<chart:SfChart.Legend>
<chart:ChartLegend />
</chart:SfChart.Legend>
<chart:SfChart.Title>
<chart:ChartTitle Text="Chart"/>
</chart:SfChart.Title>
<chart:SfChart.PrimaryAxis>
<chart:CategoryAxis>
<chart:CategoryAxis.Title>
<chart:ChartAxisTitle Text="Name"/>
</chart:CategoryAxis.Title>
</chart:CategoryAxis>
</chart:SfChart.PrimaryAxis>
<chart:SfChart.SecondaryAxis>
<chart:NumericalAxis>
<chart:NumericalAxis.Title>
<chart:ChartAxisTitle Text="Height (in cm)"/>
</chart:NumericalAxis.Title>
</chart:NumericalAxis>
</chart:SfChart.SecondaryAxis>
<chart:SfChart.Series>
<chart:ColumnSeries ItemsSource="{Binding Data}" Label="Heights" XBindingPath="Name" YBindingPath="Height" EnableTooltip="True">
<chart:ColumnSeries.DataMarker>
<chart:ChartDataMarker/>
</chart:ColumnSeries.DataMarker>
</chart:ColumnSeries>
</chart:SfChart.Series>
</chart:SfChart>
</ContentPage>
[C#]
series.EnableTooltip = true;
Output
Refer this link to learn more about the options available in SfChart to customize tooltip.
I hope you enjoyed learning about the quick getting started with Charts in Xamarin. You can explore the runnable sample of getting started with Charts in Xamarin from this this GitHub location.
You can refer to our Xamarin.Forms Charts feature tour page to know about its other groundbreaking feature representations. You can also explore our Xamarin.Forms Charts example to understand how to present and manipulate data.
For current customers, you can check out our Xamarin components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our Xamarin Charts and other Xamarin components.
If you have any queries or require clarifications, please let us know in comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
