{"id":23061588,"url":"https://github.com/syncfusionexamples/xamarin.forms-sfchart","last_synced_at":"2025-07-21T12:03:10.385Z","repository":{"id":52375616,"uuid":"163662748","full_name":"SyncfusionExamples/xamarin.forms-sfchart","owner":"SyncfusionExamples","description":"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.","archived":false,"fork":false,"pushed_at":"2024-02-15T13:47:48.000Z","size":866,"stargazers_count":2,"open_issues_count":0,"forks_count":5,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-06-20T12:50:50.256Z","etag":null,"topics":["chart","charts","getting-started","graph","graphs","xamarin-forms"],"latest_commit_sha":null,"homepage":"https://www.syncfusion.com/","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SyncfusionExamples.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-12-31T11:15:22.000Z","updated_at":"2023-01-24T10:52:28.000Z","dependencies_parsed_at":"2025-06-20T12:47:28.304Z","dependency_job_id":null,"html_url":"https://github.com/SyncfusionExamples/xamarin.forms-sfchart","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/SyncfusionExamples/xamarin.forms-sfchart","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2Fxamarin.forms-sfchart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2Fxamarin.forms-sfchart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2Fxamarin.forms-sfchart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2Fxamarin.forms-sfchart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SyncfusionExamples","download_url":"https://codeload.github.com/SyncfusionExamples/xamarin.forms-sfchart/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SyncfusionExamples%2Fxamarin.forms-sfchart/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266296760,"owners_count":23907012,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-21T11:47:31.412Z","response_time":64,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chart","charts","getting-started","graph","graphs","xamarin-forms"],"created_at":"2024-12-16T03:17:52.667Z","updated_at":"2025-07-21T12:03:10.360Z","avatar_url":"https://github.com/SyncfusionExamples.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Getting Started for Xamarin.Forms Charts\r\n[Xamarin Charts](https://www.syncfusion.com/xamarin-ui-controls/xamarin-charts/?utm_source=github\u0026utm_medium=listing\u0026utm_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.\r\n\r\nFor more details please refer the Xamarin.Forms SfChart UG documentation [Getting Started](https://help.syncfusion.com/xamarin/sfchart/getting-started?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=xamarin-charts-github-samples) link.\r\n\r\n## \u003ca name=\"requirements-to-run-the-demo\"\u003e\u003c/a\u003eRequirements to run the demo ##\r\n\r\n* [Visual Studio 2017](https://visualstudio.microsoft.com/downloads/?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=xamarin-charts-github-samples) or [Visual Studio for Mac](https://visualstudio.microsoft.com/vs/mac/?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=xamarin-charts-github-samples).\r\n* Xamarin add-ons for Visual Studio (available via the Visual Studio installer).\r\n\r\n## \u003ca name=\"troubleshooting\"\u003e\u003c/a\u003eTroubleshooting ##\r\n### Path too long exception\r\nIf 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.\r\n\r\n## \u003ca name=\"description\"\u003e\u003c/a\u003eDescription ##\r\n\r\n### Initialize Chart\r\n\r\nImport 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,\r\n\r\n###### Xaml\r\n```xaml\r\nxmlns:chart=\"clr-namespace:Syncfusion.SfChart.XForms;assembly=Syncfusion.SfChart.XForms\" \r\n```\r\n###### C#\r\n```C#\r\nusing Syncfusion.SfChart.XForms;\r\n```\r\n\r\nThen 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,\r\n\r\n###### Xaml\r\n```xaml\r\n\u003cchart:SfChart\u003e\r\n\r\n\u003cchart:SfChart.PrimaryAxis\u003e\r\n    \u003cchart:CategoryAxis/\u003e\r\n\u003c/chart:SfChart.PrimaryAxis\u003e\r\n\r\n\u003cchart:SfChart.SecondaryAxis\u003e\r\n    \u003cchart:NumericalAxis/\u003e\r\n\u003c/chart:SfChart.SecondaryAxis\u003e\r\n\r\n\u003c/chart:SfChart\u003e\r\n```\r\n###### C#\r\n```C#\r\nSfChart chart = new SfChart();\r\n\r\n//Initializing Primary Axis\r\nCategoryAxis primaryAxis = new CategoryAxis();\r\nchart.PrimaryAxis = primaryAxis;\r\n\r\n//Initializing Secondary Axis\r\nNumericalAxis secondaryAxis  =  new NumericalAxis  ();\r\nchart.SecondaryAxis = secondaryAxis;\r\n\r\nthis.Content = chart;\r\n```\r\n\r\n### Initialize view model\r\n\r\nNow, 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)\r\n\r\n```C#\r\npublic class Person   \r\n{   \r\n    public string Name { get; set; }\r\n\r\n    public double Height { get; set; }\r\n}\r\n``` \r\n\r\nNext, create a view model class and initialize a list of `Person` objects as shown below,\r\n\r\n```C#\r\npublic class ViewModel  \r\n{\r\n    public List\u003cPerson\u003e Data { get; set; }      \r\n\r\n    public ViewModel()       \r\n    {\r\n        Data = new List\u003cPerson\u003e()\r\n        {\r\n            new Person { Name = \"David\", Height = 180 },\r\n            new Person { Name = \"Michael\", Height = 170 },\r\n            new Person { Name = \"Steve\", Height = 160 },\r\n            new Person { Name = \"Joel\", Height = 182 }\r\n        }; \r\n    }\r\n}\r\n```\r\n\r\nSet 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)\r\n\r\n Add namespace of `ViewModel` class in your XAML page if you prefer to set `BindingContext` in XAML.\r\n\r\n###### Xaml\r\n```Xaml\r\n\u003cContentPage xmlns=\"http://xamarin.com/schemas/2014/forms\"\r\nxmlns:x=\"http://schemas.microsoft.com/winfx/2009/xaml\"\r\nx:Class=\"ChartDemo.MainPage\"\r\nxmlns:chart=\"clr-namespace:Syncfusion.SfChart.XForms;assembly=Syncfusion.SfChart.XForms\"\r\nxmlns:local=\"clr-namespace:ChartDemo\"\u003e \r\n\r\n\u003cContentPage.BindingContext\u003e\r\n    \u003clocal:ViewModel\u003e\u003c/local:ViewModel\u003e\r\n\u003c/ContentPage.BindingContext\u003e\r\n\r\n\u003c/ContentPage\u003e\r\n```\r\n###### C#\r\n```C#\r\nthis.BindingContext = new ViewModel();\r\n```\r\n### Populate Chart with data\r\n\r\nAs 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.\r\n\r\nYou 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.\r\n\r\n###### Xaml\r\n```xaml\r\n\u003cContentPage.BindingContext\u003e\r\n    \u003clocal:ViewModel/\u003e\r\n\u003c/ContentPage.BindingContext\u003e\r\n\r\n\u003cchart:SfChart\u003e\r\n\r\n\u003cchart:SfChart.PrimaryAxis\u003e\r\n    \u003cchart:CategoryAxis\u003e\r\n        \u003cchart:CategoryAxis.Title\u003e\r\n            \u003cchart:ChartAxisTitle Text=\"Name\"\u003e \u003c/chart:ChartAxisTitle\u003e\r\n        \u003c/chart:CategoryAxis.Title\u003e\r\n    \u003c/chart:CategoryAxis\u003e\r\n\u003c/chart:SfChart.PrimaryAxis\u003e\r\n\r\n\u003cchart:SfChart.SecondaryAxis\u003e\r\n    \u003cchart:NumericalAxis\u003e\r\n        \u003cchart:NumericalAxis.Title\u003e\r\n            \u003cchart:ChartAxisTitle Text=\"Height (in cm)\"\u003e\u003c/chart:ChartAxisTitle\u003e\r\n        \u003c/chart:NumericalAxis.Title\u003e      \r\n    \u003c/chart:NumericalAxis\u003e   \r\n\u003c/chart:SfChart.SecondaryAxis\u003e\r\n\r\n\u003cchart:SfChart.Series\u003e\r\n    \u003cchart:ColumnSeries ItemsSource=\"{Binding Data}\" XBindingPath=\"Name\" YBindingPath=\"Height\"/\u003e\r\n\u003c/chart:SfChart.Series\u003e\r\n\r\n\u003c/chart:SfChart\u003e \r\n```\r\n\r\n###### C#\r\n```C#\r\nthis.BindingContext = new ViewModel();\r\nSfChart chart = new SfChart();\r\n\r\n//Initializing primary axis\r\nCategoryAxis primaryAxis = new CategoryAxis();\r\nprimaryAxis.Title.Text = \"Name\";\r\nchart.PrimaryAxis = primaryAxis;\r\n\r\n//Initializing secondary Axis\r\nNumericalAxis secondaryAxis = new NumericalAxis();\r\nsecondaryAxis.Title.Text = \"Height (in cm)\";\r\nchart.SecondaryAxis = secondaryAxis;\r\n\r\n//Initializing column series\r\nColumnSeries series = new ColumnSeries();\r\nseries.SetBinding(ChartSeries.ItemsSourceProperty, \"Data\");\r\nseries.XBindingPath = \"Name\";\r\nseries.YBindingPath = \"Height\";\r\nchart.Series.Add(series);\r\n\r\nthis.Content = chart;\r\n```\r\n\r\n## \u003ca name=\"output\"\u003e\u003c/a\u003eOutput ##\r\n\r\n![Xamarin.Forms Getting_Started Chart image](Getting_Started_Chart_image.png)\r\n\r\n## Related links\r\n[Learn More about Xamarin Charts](https://www.syncfusion.com/xamarin-ui-controls/xamarin-charts/?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=xamarin-charts-github-samples) \u003cbr/\u003e\u003cbr/\u003e\r\n[Download Free Trial](https://www.syncfusion.com/downloads?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=xamarin-charts-github-samples) \u003cbr/\u003e\u003cbr/\u003e\r\n[Pricing](https://www.syncfusion.com/sales/products/xamarin?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=xamarin-charts-github-samples) \u003cbr/\u003e\u003cbr/\u003e\r\n[Documentation](https://help.syncfusion.com/xamarin/charts/getting-started?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=xamarin-charts-github-samples) \u003cbr/\u003e\u003cbr/\u003e\r\n[Online Examples](https://github.com/syncfusion/xamarin-demos/tree/master/Forms/Chart?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=xamarin-charts-github-samples) \u003cbr/\u003e\u003cbr/\u003e\r\n[Community Forums](https://www.syncfusion.com/forums/xamarin.forms/sfchart?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=xamarin-charts-github-samples) \u003cbr/\u003e\u003cbr/\u003e\r\n[Suggest a feature](https://www.syncfusion.com/feedback/xamarin-forms?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=xamarin-charts-github-samples)\r\n\r\n## About Syncfusion Xamarin UI Controls\r\nSyncfusion's [Xamarin.Forms](https://www.syncfusion.com/xamarin-ui-controls?utm_source=github\u0026utm_medium=listing\u0026utm_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\u0026utm_medium=listing\u0026utm_campaign=xamarin-charts-github-samples),\r\n[Scheduler](https://www.syncfusion.com/xamarin-ui-controls/xamarin-scheduler?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=xamarin-charts-github-samples), [Diagram](https://www.syncfusion.com/xamarin-ui-controls/xamarin-diagram?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=xamarin-charts-github-samples), and [Maps](https://www.syncfusion.com/xamarin-ui-controls/xamarin-maps?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=xamarin-charts-github-samples).\r\n\r\n## About Syncfusion\r\nFounded 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.\r\n \r\nToday, we provide 1600+ controls and frameworks for web\r\n([Blazor](https://www.syncfusion.com/blazor-components?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=xamarin-charts-github-samples),\r\n[ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=xamarin-charts-github-samples),\r\n[ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=xamarin-charts-github-samples),\r\n[ASP.NET WebForms](https://www.syncfusion.com/jquery/aspnet-webforms-ui-controls?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=xamarin-charts-github-samples),\r\n[JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=xamarin-charts-github-samples),\r\n[Angular](https://www.syncfusion.com/angular-ui-components?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=xamarin-charts-github-samples),\r\n[React](https://www.syncfusion.com/react-ui-components?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=xamarin-charts-github-samples),\r\n[Vue](https://www.syncfusion.com/vue-ui-components?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=xamarin-charts-github-samples),\r\nand \r\n[Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=xamarin-charts-github-samples)),\r\nmobile\r\n([Xamarin](https://www.syncfusion.com/xamarin-ui-controls?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=xamarin-charts-github-samples),\r\n[Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=xamarin-charts-github-samples),\r\n[UWP](https://www.syncfusion.com/uwp-ui-controls?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=xamarin-charts-github-samples),\r\nand\r\n[JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=xamarin-charts-github-samples)),\r\nand desktop development ([Windows\r\nForms](https://www.syncfusion.com/winforms-ui-controls?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=xamarin-charts-github-samples),\r\n[WPF](https://www.syncfusion.com/wpf-ui-controls?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=xamarin-charts-github-samples),\r\n[WinUI(Preview)](https://www.syncfusion.com/winui-controls?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=xamarin-charts-github-samples),\r\n[Flutter](https://www.syncfusion.com/flutter-widgets?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=xamarin-charts-github-samples)\r\nand\r\n[UWP](https://www.syncfusion.com/uwp-ui-controls?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=xamarin-charts-github-samples)).\r\nWe provide ready-to-deploy enterprise software for dashboards, reports,\r\ndata integration, and big data processing. Many customers have saved\r\nmillions in licensing fees by deploying our software.\r\n\r\n\t\t\r\n\u003chr style=\"height:0.3px;border:none;color:lightgrey;background-color:lightgrey;\" /\u003e\r\n\r\n\u003cp align=\"center\"\u003e\r\n  \u003ca href=\"mailto:sales@syncfusion.com?Subject=Syncfusion Xamarin Charts - Github\" target=\"_top\"\u003esales@syncfusion.com\u003c/a\u003e | \u003ca href=\"https://www.syncfusion.com?utm_source=github\u0026utm_medium=listing\u0026utm_campaign=xamarin-charts-github-samples\"\u003ewww.syncfusion.com\u003c/a\u003e | 1-888-9 DOTNET \u003cbr\u003e\r\n\u003c/p\u003e\r\n\r\n\r\n\r\n\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyncfusionexamples%2Fxamarin.forms-sfchart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsyncfusionexamples%2Fxamarin.forms-sfchart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyncfusionexamples%2Fxamarin.forms-sfchart/lists"}