Syncfusion® Toolkit for .NET MAUI

When using Syncfusion charts, you must provide a data model and a ViewModel to facilitate data binding.

1. Data Model: Create a class (e.g., Person) with properties that correspond to the XBindingPath and YBindingPath used in your XAML series.
2. ViewModel: Create a class containing a collection (e.g., List<T>) that holds instances of your data model. This collection should be exposed via a public property (e.g., Data) so it can be bound to the chart's ItemsSource.

// Person.cs
public class Person
{
    public string Name { get; set; }
    public double Height { get; set; }
}

// ViewModel.cs
public class ViewModel
{
    public List<Person> Data { get; set; }

    public ViewModel()
    {
        Data = new List<Person>()
        {
            new Person { Name = "David", Height = 170 },
            new Person { Name = "Michael", Height = 96 },
            new Person { Name = "Steve", Height = 65 },
            new Person { Name = "Joel", Height = 182 },
            new Person { Name = "Bob", Height = 134 }
        };
    }
}

To visualize data using a Cartesian Chart, you need to set up a SfCartesianChart in XAML, define its axes, and bind a data series to a collection in your ViewModel.

Key Steps:

1. Namespace Declaration: Add xmlns:chart="clr-namespace:Syncfusion.Maui.Toolkit.Charts;assembly=Syncfusion.Maui.Toolkit" to your XAML file.
2. Axes Configuration: Use CategoryAxis for categorical data (e.g., names on the X-axis) and NumericalAxis for continuous data (e.g., values on the Y-axis).
3. Data Series: Use ColumnSeries (or other series types) and bind the ItemsSource to your data collection. Specify XBindingPath and YBindingPath to map your model properties to the chart axes.
4. Data Labels: Customize label appearance using DataLabelSettings and CartesianDataLabelSettings.

<ContentPage 
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="ChartGettingStarted.MainPage"
    xmlns:chart="clr-namespace:Syncfusion.Maui.Toolkit.Charts;assembly=Syncfusion.Maui.Toolkit"
    xmlns:model="clr-namespace:ChartGettingStarted">
    
    <ContentPage.BindingContext>
        <model:ViewModel/>
    </ContentPage.BindingContext>

    <chart:SfCartesianChart>
        <chart:SfCartesianChart.Title>
            <Label Text="Height Comparison" HorizontalOptions="Center" />
        </chart:SfCartesianChart.Title>

        <chart:SfCartesianChart.Legend>
            <chart:ChartLegend />
        </chart:SfCartesianChart.Legend>

        <chart:SfCartesianChart.XAxes>
            <chart:CategoryAxis>
                <chart:CategoryAxis.Title>
                    <chart:ChartAxisTitle Text="Name" />
                </chart:CategoryAxis.Title>
            </chart:CategoryAxis>
        </chart:SfCartesianChart.XAxes>

        <chart:SfCartesianChart.YAxes>
            <chart:NumericalAxis>
                <chart:NumericalAxis.Title>
                    <chart:ChartAxisTitle Text="Height(in cm)" />
                </chart:NumericalAxis.Title>
            </chart:NumericalAxis>
        </chart:SfCartesianChart.YAxes>

        <chart:ColumnSeries Label="Height"
                         EnableTooltip="True" 
                         ShowDataLabels="True" 
                         ItemsSource="{Binding Data}" 
                         XBindingPath="Name" 
                         YBindingPath="Height">
            <chart:ColumnSeries.DataLabelSettings>
                <chart:CartesianDataLabelSettings LabelPlacement="Inner" />
            </chart:ColumnSeries.DataLabelSettings>
        </chart:ColumnSeries>
    </chart:SfCartesianChart>
</ContentPage>