https://github.com/syncfusionexamples/xamarin.forms-sfchart
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.
https://github.com/syncfusionexamples/xamarin.forms-sfchart
chart charts getting-started graph graphs xamarin-forms
Last synced: 6 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/syncfusionexamples/xamarin.forms-sfchart
- Owner: SyncfusionExamples
- Created: 2018-12-31T11:15:22.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2024-02-15T13:47:48.000Z (almost 2 years ago)
- Last Synced: 2025-06-20T12:50:50.256Z (7 months ago)
- Topics: chart, charts, getting-started, graph, graphs, xamarin-forms
- Language: C#
- Homepage: https://www.syncfusion.com/
- Size: 846 KB
- Stars: 2
- Watchers: 4
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Getting Started for Xamarin.Forms Charts
[Xamarin Charts](https://www.syncfusion.com/xamarin-ui-controls/xamarin-charts/?utm_source=github&utm_medium=listing&utm_campaign=xamarin-charts-github-samples), 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](https://help.syncfusion.com/xamarin/sfchart/getting-started?utm_source=github&utm_medium=listing&utm_campaign=xamarin-charts-github-samples) link.
## Requirements to run the demo ##
* [Visual Studio 2017](https://visualstudio.microsoft.com/downloads/?utm_source=github&utm_medium=listing&utm_campaign=xamarin-charts-github-samples) or [Visual Studio for Mac](https://visualstudio.microsoft.com/vs/mac/?utm_source=github&utm_medium=listing&utm_campaign=xamarin-charts-github-samples).
* 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.
### Initialize Chart
Import the [`SfChart`](https://help.syncfusion.com/cr/cref_files/xamarin/Syncfusion.SfChart.XForms~Syncfusion.SfChart.XForms.SfChart.html) namespace as shown below in your respective Page,
###### Xaml
```xaml
xmlns:chart="clr-namespace:Syncfusion.SfChart.XForms;assembly=Syncfusion.SfChart.XForms"
```
###### C#
```C#
using Syncfusion.SfChart.XForms;
```
Then initialize an empty chart with [`PrimaryAxis`](https://help.syncfusion.com/cr/cref_files/xamarin/Syncfusion.SfChart.XForms~Syncfusion.SfChart.XForms.SfChart~PrimaryAxis.html) and [`SecondaryAxis`](https://help.syncfusion.com/cr/cref_files/xamarin/Syncfusion.SfChart.XForms~Syncfusion.SfChart.XForms.SfChart~SecondaryAxis.html) as shown below,
###### Xaml
```xaml
```
###### C#
```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`.](https://help.syncfusion.com/cr/cref_files/xamarin/Syncfusion.SfChart.XForms~Syncfusion.SfChart.XForms.SfChart.html)
```C#
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,
```C#
public class ViewModel
{
public List Data { get; set; }
public ViewModel()
{
Data = new List()
{
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`.](https://help.syncfusion.com/cr/cref_files/xamarin/Syncfusion.SfChart.XForms~Syncfusion.SfChart.XForms.SfChart.html)
Add namespace of `ViewModel` class in your XAML page if you prefer to set `BindingContext` in XAML.
###### Xaml
```Xaml
```
###### C#
```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`](https://help.syncfusion.com/cr/cref_files/xamarin/Syncfusion.SfChart.XForms~Syncfusion.SfChart.XForms.ColumnSeries.html) to [`SfChart.Series`](https://help.syncfusion.com/cr/cref_files/xamarin/Syncfusion.SfChart.XForms~Syncfusion.SfChart.XForms.SfChart~Series.html) property, and then bind the Data property of the above `ViewModel` to the [`ColumnSeries.ItemsSource`](https://help.syncfusion.com/cr/cref_files/xamarin/Syncfusion.SfChart.XForms~Syncfusion.SfChart.XForms.ChartSeries~ItemsSource.html) property as shown below.
You need to set [`XBindingPath`](https://help.syncfusion.com/cr/cref_files/xamarin/Syncfusion.SfChart.XForms~Syncfusion.SfChart.XForms.ChartSeries~XBindingPath.html) and [`YBindingPath`](https://help.syncfusion.com/cr/cref_files/xamarin/Syncfusion.SfChart.XForms~Syncfusion.SfChart.XForms.XyDataSeries~YBindingPath.html) properties, so that [`SfChart`](https://help.syncfusion.com/cr/cref_files/xamarin/Syncfusion.SfChart.XForms~Syncfusion.SfChart.XForms.SfChart.html) would fetch values from the respective properties in the data model to plot the series.
###### Xaml
```xaml
```
###### C#
```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;
```
## Related links
[Learn More about Xamarin Charts](https://www.syncfusion.com/xamarin-ui-controls/xamarin-charts/?utm_source=github&utm_medium=listing&utm_campaign=xamarin-charts-github-samples)
[Download Free Trial](https://www.syncfusion.com/downloads?utm_source=github&utm_medium=listing&utm_campaign=xamarin-charts-github-samples)
[Pricing](https://www.syncfusion.com/sales/products/xamarin?utm_source=github&utm_medium=listing&utm_campaign=xamarin-charts-github-samples)
[Documentation](https://help.syncfusion.com/xamarin/charts/getting-started?utm_source=github&utm_medium=listing&utm_campaign=xamarin-charts-github-samples)
[Online Examples](https://github.com/syncfusion/xamarin-demos/tree/master/Forms/Chart?utm_source=github&utm_medium=listing&utm_campaign=xamarin-charts-github-samples)
[Community Forums](https://www.syncfusion.com/forums/xamarin.forms/sfchart?utm_source=github&utm_medium=listing&utm_campaign=xamarin-charts-github-samples)
[Suggest a feature](https://www.syncfusion.com/feedback/xamarin-forms?utm_source=github&utm_medium=listing&utm_campaign=xamarin-charts-github-samples)
## About Syncfusion Xamarin UI Controls
Syncfusion's [Xamarin.Forms](https://www.syncfusion.com/xamarin-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=xamarin-charts-github-samples) 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](https://www.syncfusion.com/xamarin-ui-controls/xamarin-datagrid?utm_source=github&utm_medium=listing&utm_campaign=xamarin-charts-github-samples),
[Scheduler](https://www.syncfusion.com/xamarin-ui-controls/xamarin-scheduler?utm_source=github&utm_medium=listing&utm_campaign=xamarin-charts-github-samples), [Diagram](https://www.syncfusion.com/xamarin-ui-controls/xamarin-diagram?utm_source=github&utm_medium=listing&utm_campaign=xamarin-charts-github-samples), and [Maps](https://www.syncfusion.com/xamarin-ui-controls/xamarin-maps?utm_source=github&utm_medium=listing&utm_campaign=xamarin-charts-github-samples).
## 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](https://www.syncfusion.com/blazor-components?utm_source=github&utm_medium=listing&utm_campaign=xamarin-charts-github-samples),
[ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=xamarin-charts-github-samples),
[ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=xamarin-charts-github-samples),
[ASP.NET WebForms](https://www.syncfusion.com/jquery/aspnet-webforms-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=xamarin-charts-github-samples),
[JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=xamarin-charts-github-samples),
[Angular](https://www.syncfusion.com/angular-ui-components?utm_source=github&utm_medium=listing&utm_campaign=xamarin-charts-github-samples),
[React](https://www.syncfusion.com/react-ui-components?utm_source=github&utm_medium=listing&utm_campaign=xamarin-charts-github-samples),
[Vue](https://www.syncfusion.com/vue-ui-components?utm_source=github&utm_medium=listing&utm_campaign=xamarin-charts-github-samples),
and
[Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=xamarin-charts-github-samples)),
mobile
([Xamarin](https://www.syncfusion.com/xamarin-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=xamarin-charts-github-samples),
[Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=xamarin-charts-github-samples),
[UWP](https://www.syncfusion.com/uwp-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=xamarin-charts-github-samples),
and
[JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=xamarin-charts-github-samples)),
and desktop development ([Windows
Forms](https://www.syncfusion.com/winforms-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=xamarin-charts-github-samples),
[WPF](https://www.syncfusion.com/wpf-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=xamarin-charts-github-samples),
[WinUI(Preview)](https://www.syncfusion.com/winui-controls?utm_source=github&utm_medium=listing&utm_campaign=xamarin-charts-github-samples),
[Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github&utm_medium=listing&utm_campaign=xamarin-charts-github-samples)
and
[UWP](https://www.syncfusion.com/uwp-ui-controls?utm_source=github&utm_medium=listing&utm_campaign=xamarin-charts-github-samples)).
We provide ready-to-deploy enterprise software for dashboards, reports,
data integration, and big data processing. Many customers have saved
millions in licensing fees by deploying our software.
sales@syncfusion.com | www.syncfusion.com | 1-888-9 DOTNET