How to create .NET MAUI Charts Library - Quick Getting Started Guide (SfCartesianChart)?
This guide explains how to populate a chart with data, legend, title, data labels, and tooltips, covering essential aspects of getting started with the .NET MAUI Charts Component.
How to Initialize the Chart
Create a new .NET MAUI application in Visual Studio and import the Syncfusion® .NET MAUI component available on NuGet.org by searching for Syncfusion.Maui.Charts in the NuGet manager and then install them.
Import the namespace Syncfusion.Maui.Charts as shown below on your respective Page.
[XAML]
xmlns:chart = "clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts"
[C#]
using Syncfusion.Maui.Charts;
Syncfusion.Maui.Core NuGet is a dependent package for all Syncfusion® controls of .NET MAUI. So, in the MauiProgram.cs file, register the handler for Syncfusion® core.
[C#]
using Syncfusion.Maui.Core.Hosting;
namespace ChartGettingStarted;
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder.UseMauiApp<App>()
.ConfigureSyncfusionCore()
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
});
return builder.Build();
}
}How to initialize the chart axis
ChartAxis is used to locate the data points inside the chart area. The X-Axes and Y-Axes collection of the chart is used to initialize the axes for the chart.
[XAML]
<chart:SfCartesianChart> <chart:SfCartesianChart.XAxes> <chart:CategoryAxis/> </chart:SfCartesianChart.XAxes> <chart:SfCartesianChart.YAxes> <chart:NumericalAxis/> </chart:SfCartesianChart.YAxes> </chart:SfCartesianChart>
[C#]
SfCartesianChart chart = new SfCartesianChart(); //Initializing primary axis. CategoryAxis primaryAxis = new CategoryAxis(); chart.XAxes.Add(primaryAxis); //Initializing secondary axis. NumericalAxis secondaryAxis = new NumericalAxis(); chart.YAxes.Add(secondaryAxis); this.Content = chart;
Run the project and check if you get the following output to make sure you have configured your project properly to add a chart.
How to initialize the view model
Define a simple data model class that represents a data point in SfCartesianChart.
[C#]
public class Person
{
public string Name { get; set; }
public double Height { get; set; }
}Then, create a view model class and initialize a list of data model class objects as shown below.
[C#]
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 }
};
}
} Also, set the view model instance as the BindingContext of your page in the code behind to bind properties of the view model to SfCartesianChart.
Add a namespace of the ViewModel class in your XAML page if you prefer to set the BindingContext in XAML.
[XAML]
<ContentPage xmlns=http://xamarin.com/schemas/2014/forms xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class=" ChartGettingStarted.MainPage" xmlns:chart="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts" xmlns:local="clr-namespace: ChartGettingStarted "> <ContentPage.BindingContext> <local:ViewModel/> </ContentPage.BindingContext> </ContentPage>
[C#]
this.BindingContext = new ViewModel();
How to populate a chart with data
To visualize the comparison of heights in the data model, add ColumnSeries to the Series property of the chart, and then bind the Data property of the above view model to the ColumnSeries.ItemsSource is as follows.
You need to set XBindingPath and YBindingPath properties so that the chart will fetch values from the respective properties in the data model to plot the series. Since the Cartesian chart has Series as its default content, the chart will be empty.
[XAML]
<chart:SfCartesianChart>
<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:SfCartesianChart.Series>
<chart:ColumnSeries ItemsSource="{Binding Data}" XBindingPath="Name" YBindingPath="Height" ShowDataLabels="True" EnableTooltip="True"/>
</chart:SfCartesianChart.Series>
</chart:SfCartesianChart>[C#]
SfCartesianChart chart = new SfCartesianChart();
//Initializing primary axis.
CategoryAxis primaryAxis = new CategoryAxis()
{
Title = new ChartAxisTitle() { Text="Name"}
};
chart.XAxes.Add(primaryAxis);
//Initializing secondary axis.
NumericalAxis secondaryAxis = new NumericalAxis()
{
Title = new ChartAxisTitle() { Text = "Height(in cm)" }
};
chart.YAxes.Add(secondaryAxis);
//Initializing column series.
ColumnSeries series = new ColumnSeries();
series.SetBinding(ChartSeries.ItemsSourceProperty, nameof(viewModel.Data));
series.XBindingPath = "Name";
series.YBindingPath = "Height";
chart.Series.Add(series);
this.Content = chart;
How to add a Title
You can add a title to the chart to provide quick information to the user about the data being plotted in the chart. You can set the title using SfCartesianChart.Title property as shown below.
[XAML]
<chart:SfCartesianChart>
<chart:SfCartesianChart.Title>
<Label Text="Height Comparison" HorizontalOptions="Center" VerticalOptions="Center"/>
</chart:SfCartesianChart.Title>
</chart:SfCartesianChart>[C#]
SfCartesianChart chart = new SfCartesianChart();
chart.Title = new Label
{
Text = "Height Comparison"
};How to enable the DataLabels
The ShowDataLabels property of a series can be used to enable the data labels to improve the readability of the chart. The label visibility is set to False by default.
[XAML]
<chart:SfCartesianChart> . . . <chart:ColumnSeries ShowDataLabels="True"/> . . . </chart:SfCartesianChart>
[C#]
SfCartesianChart chart = new SfCartesianChart() . . . ColumnSeries series = new ColumnSeries(); series.ShowDataLabels = true; chart.Series.Add(series);
Refer to the DataLabelSettings property to learn more about the options available in SfCartesianChart to customize data labels.
How to enable the legend
The legend provides information about the data point displayed in the chart. The Legend property of the chart is used to enable it.
[XAML]
<chart:SfCartesianChart > . . . <chart:SfCartesianChart.Legend> <chart:ChartLegend/> </chart:SfCartesianChart.Legend> . . . </chart:SfCartesianChart>
[C#]
SfCartesianChart chart = new SfCartesianChart(); chart.Legend = new ChartLegend();
Additionally, you can set a label for each series using the Label property of the chart series, which will be displayed in the corresponding legend item.
[XAML]
<chart:SfCartesianChart>
. . .
<chart:ColumnSeries Label="Height" ItemsSource="{Binding Data}"
XBindingPath="Name" YBindingPath="Height">
</chart:ColumnSeries>
. . .
</chart:SfCartesianChart>[C#]
ColumnSeries series = new ColumnSeries(); series.SetBinding(ChartSeries.ItemsSourceProperty, nameof(viewModel.Data)); series.XBindingPath = "Name"; series.YBindingPath = "Height"; series.Label = "Height";
How to enable Tooltip
Tooltips are used to show information about the segment when a user taps or hovers over a segment. You can enable the tooltip by setting ChartSeries.EnableTooltip property to true.
[XAML]
<chart:SfCartesianChart>
...
<chart:ColumnSeries EnableTooltip="True" ItemsSource="{Binding Data}"
XBindingPath="Name" YBindingPath="Height"/>
...
</chart:SfCartesianChart> [C#]
ColumnSeries series = new ColumnSeries(); series.SetBinding(ChartSeries.ItemsSourceProperty, nameof(viewModel.Data)); series.XBindingPath = "Name"; series.YBindingPath = "Height"; series.EnableTooltip = true;
Refer to the TooltipTemplate property to learn more about the options available in SfCartesianChart to customize the tooltip.
The following code example gives you the complete code of the above configurations.
[XAML]
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:chart="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts"
x:Class=" ChartGettingStarted.MainPage""
xmlns:local="clr-namespace: ChartGettingStarted ">
<ContentPage.BindingContext>
<local:ViewModel/>
</ContentPage.BindingContext>
<ContentPage.Content>
<chart:SfCartesianChart>
<chart:SfCartesianChart.Title>
<Label Text="Height Comparison" HorizontalTextAlignment="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:SfCartesianChart.Series>
<chart:ColumnSeries ItemsSource="{Binding Data}" XBindingPath="Name"
YBindingPath="Height" ShowDataLabels="True" EnableTooltip="True"/>
</chart:SfCartesianChart.Series>
</chart:SfCartesianChart>
</ContentPage.Content>
</ContentPage>[C#]
using Syncfusion.Maui.Charts;
namespace ChartGettingStarted;
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
ViewModel viewModel = new ViewModel();
this.BindingContext = viewModel;
SfCartesianChart chart = new SfCartesianChart();
chart.Title = new Label
{
Text = "Height Comparison", HorizontalTextAlignment = TextAlignment.Center
};
chart.Legend = new ChartLegend();
// Initializing primary axis.
CategoryAxis primaryAxis = new CategoryAxis()
{
Title = new ChartAxisTitle() { Text = "Name" }
};
chart.XAxes.Add(primaryAxis);
//Initializing secondary Axis.
NumericalAxis secondaryAxis = new NumericalAxis()
{
Title = new ChartAxisTitle() { Text = "Height(in cm)" }
};
chart.YAxes.Add(secondaryAxis);
//Initialize the two series for SfCartesianChart.
ColumnSeries series = new ColumnSeries();
series.SetBinding(ChartSeries.ItemsSourceProperty, nameof(viewModel.Data));
series.Label = "Height";
series.ShowDataLabels = true;
series.XBindingPath = "Name";
series.YBindingPath = "Height";
series.EnableTooltip = true;
//Adding Series to the Chart Series Collection.
chart.Series.Add(series);
this.Content = chart;
}
}The following chart is created as a result of the previous code.
Conclusion
I hope you enjoyed learning how to create .NET MAUI Charts Library - Quick Getting Started Guide (SfCartesianChart).
You can refer to our .NET MAUI Chart feature tour page to learn about its other groundbreaking feature representations. Explore our .NET MAUI Chart documentation to understand how to present and manipulate data.
For current customers, check out our .NET MAUI from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Chart and other .NET MAUI components.
Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
