Getting Started for Xamarin.Forms Charts

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