Getting Started For Xamarin.Forms Charts

Updated on Feb 15, 2024

Xamarin Charts, an easy-to-use, cross-platform charting package, is used to add 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. This is demo application of Xamarin.Forms SfChart control. The minimal set of required properties have been configured in this project to get started with SfChart in Xamarin.Forms.

For more details please refer the Xamarin.Forms SfChart UG documentation Getting Started link.

Requirements to run the demo

Visual Studio 2017 or Visual Studio for Mac.
Xamarin add-ons for Visual Studio (available via the Visual Studio installer).

Troubleshooting

Path too long exception

If you are facing path too long exception when building this example project, close Visual Studio and rename the repository to short and build the project.

Description

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:SfChart.PrimaryAxis>



<chart:SfChart.SecondaryAxis>

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

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

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


<ContentPage.BindingContext>

    <local:ViewModel/>

</ContentPage.BindingContext>



<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:SfChart.Series>



</chart:SfChart>

C


this.BindingContext = new ViewModel();

SfChart chart = new SfChart();



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



this.Content = chart;

Output

Xamarin.Forms Getting_Started Chart image

Learn More about Xamarin Charts

About Syncfusion Xamarin UI Controls

Syncfusion's Xamarin.Forms library offers over 155 UI controls to create cross-platform native mobile apps for iOS, Android, UWP and macOS platforms from a single C# code base. In addition to Charts, we provide popular Xamarin controls such as DataGrid,

Scheduler, Diagram, and Maps.

About Syncfusion

Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 23,000+ customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies.

Today, we provide 1600+ controls and frameworks for web

(Blazor,

Vue,

and

Flutter),

mobile