Getting Started with .NET MAUI Chart

30 Mar 202421 minutes to read

This section explains how to populate the Polar chart with data, a title, data labels, a legend, tooltips, and markers. It also covers the essential aspects of getting started with the chart.

Creating an application with .NET MAUI chart

1. Create a new .NET MAUI application in Visual Studio.
2. Syncfusion .NET MAUI components are available on nuget.org. To add SfPolarChart to your project, open the NuGet package manager in Visual Studio, search for Syncfusion.Maui.Charts, and then install it.
3. To initialize the control, import the Chart namespace.
4. Initialize the SfPolarChart.

XAML

<ContentPage
    . . .    
    xmlns:chart="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts">
    <Grid>
        <chart:SfPolarChart/>
    </Grid>
</ContentPage>

C#

using Syncfusion.Maui.Charts;
namespace ChartGettingStarted
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();           
            SfPolarChart chart = new SfPolarChart(); 
        }
    }   
}

Register the handler

The Syncfusion.Maui.Core NuGet package is a dependent package for all Syncfusion controls in .NET MAUI. In the MauiProgram.cs file, register the handler for Syncfusion core.

C#

using Microsoft.Maui;
using Microsoft.Maui.Hosting;
using Microsoft.Maui.Controls.Compatibility;
using Microsoft.Maui.Controls.Hosting;
using Microsoft.Maui.Controls.Xaml;
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");
            });

            return builder.Build();
        }
    }
}

Initialize view model

Now, let us define a simple data model that represents a data point on the chart.

C#

public class PlantData   
{   
    public string Direction { get; set; }
    public double Tree { get; set; }
    public double Flower { get; set; }
    public double Weed { get; set; }
}

Next, create a view model class and initialize a list of PlantData objects as follows.

C#

public class ViewModel  
{
    public List<PlantData> PlantDetails { get; set; }      

    public ViewModel()       
    {
        PlantDetails  = new List<PlantData>()
        {
            new PlantData(){ Direction = "North", Tree = 80, Flower = 42, Weed = 63},
            new PlantData(){ Direction = "NorthWest", Tree = 85, Flower = 40, Weed = 70},
            new PlantData(){ Direction = "West", Tree = 78 , Flower = 47, Weed = 65},
            new PlantData(){ Direction = "SouthWest", Tree = 90 , Flower = 40, Weed = 70},
            new PlantData(){ Direction = "South", Tree = 78 , Flower = 27, Weed = 47},
            new PlantData(){ Direction = "SouthEast", Tree = 83 , Flower = 45, Weed = 65},
            new PlantData(){ Direction = "East", Tree = 79 , Flower = 40, Weed = 58},
            new PlantData(){ Direction = "NorthEast", Tree = 88 , Flower = 38, Weed = 73}
        }; 
    }
}

Create a ViewModel instance and set it as the chart’s BindingContext. This enables property binding from the ViewModel class.

NOTE

Add the namespace of the ViewModel class to your XAML page, if you prefer to set the BindingContext in XAML.

XAML

<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.Charts;assembly=Syncfusion.Maui.Charts"
    xmlns:model="clr-namespace:ChartGettingStarted">

    <ContentPage.BindingContext>
        <model:ViewModel></model:ViewModel>
    </ContentPage.BindingContext>
</ContentPage>

C#

this.BindingContext = new ViewModel();

Initialize Chart axis

ChartAxis is used to locate the data points inside the chart area. The PrimaryAxis and SecondaryAxis properties of the chart are used to initialize the axis for the chart.

XAML

<chart:SfPolarChart>                            
    <chart:SfPolarChart.PrimaryAxis>
        <chart:CategoryAxis/>
    </chart:SfPolarChart.PrimaryAxis>

    <chart:SfPolarChart.SecondaryAxis>
        <chart:NumericalAxis />
    </chart:SfPolarChart.SecondaryAxis>                       
</chart:SfPolarChart>

C#

SfPolarChart chart = new SfPolarChart();
CategoryAxis primaryAxis = new CategoryAxis();
chart.PrimaryAxis = primaryAxis;
NumericalAxis secondaryAxis = new NumericalAxis();
chart.SecondaryAxis = secondaryAxis;

Populate Chart with data

To create a polar chart, you can add a PolarLineSeries to the polar chart Series property of the chart, and then bind the PlantData property of the above ViewModel to the PolarLineSeries.ItemsSource as follows.

NOTE

In order to plot the series, the XBindingPath and YBindingPath properties need to be configured correctly. These properties allow the chart to retrieve values from the corresponding properties in the data model.

XAML

<chart:SfPolarChart>
    <chart:SfPolarChart.PrimaryAxis>
        <chart:CategoryAxis>
        </chart:CategoryAxis>
    </chart:SfPolarChart.PrimaryAxis>

    <chart:SfPolarChart.SecondaryAxis>
        <chart:NumericalAxis Maximum="100">
        </chart:NumericalAxis>
    </chart:SfPolarChart.SecondaryAxis>

    <chart:PolarLineSeries ItemsSource="{Binding PlantDetails}" XBindingPath="Direction" YBindingPath="Tree" />
        
    <chart:PolarLineSeries ItemsSource="{Binding PlantDetails}" XBindingPath="Direction" YBindingPath="Weed" />

    <chart:PolarLineSeries ItemsSource="{Binding PlantDetails}" XBindingPath="Direction" YBindingPath="Flower" />
</chart:SfPolarChart>

C#

SfPolarChart chart = new SfPolarChart();

// Initializing primary axis
CategoryAxis primaryAxis = new CategoryAxis();
chart.PrimaryAxis = primaryAxis;

//Initializing secondary Axis
NumericalAxis secondaryAxis = new NumericalAxis()
{
    Maximum="100"
};
chart.SecondaryAxis = secondaryAxis;

//Initialize the series
PolarLineSeries series = new PolarLineSeries();
series.ItemsSource = (new ViewModel()).PlantDetails;
series.XBindingPath = "Direction";
series.YBindingPath = "Tree";

PolarLineSeries series = new PolarLineSeries();
series.ItemsSource = (new ViewModel()).PlantDetails;
series.XBindingPath = "Direction";
series.YBindingPath = "Weed";

PolarLineSeries series = new PolarLineSeries();
series.ItemsSource = (new ViewModel()).PlantDetails;
series.XBindingPath = "Direction";
series.YBindingPath = "Flower";

//Adding Series to the Chart Series Collection
chart.Series.Add(series);

Add a title

The title of the chart provides quick information to the user about the data being plotted in the chart. The Title property is used to set the title for the chart as follows.

XAML

<Grid>
    <chart:SfPolarChart>
        <chart:SfPolarChart.Title>
            <Label Text="Plant Analysis" HorizontalTextAlignment="Center"/>
        </chart:SfPolarChart.Title> 
    </chart:SfPolarChart>
</Grid>

C#

SfPolarChart chart = new SfPolarChart();
chart.Title = new Label
{
    Text = "Plant Analysis",
    HorizontalTextAlignment="Center"
};

Enable the data labels

The ShowDataLabels property of series can be used to enable the data labels to enhance the readability of the chart. The label visibility is set to False by default.

XAML

<chart:SfPolarChart>
    . . . 
    <chart:PolarLineSeries ShowDataLabels="True">
    </chart:PolarLineSeries>
</chart:SfPolarChart>

C#

SfPolarChart chart = new SfPolarChart()
. . .
PolarLineSeries series = new PolarLineSeries();
series.ShowDataLabels = true;
chart.Series.Add(series);

Enable a legend

The legend provides information about the data point displayed in the chart. The Legend property of the chart was used to enable it.

XAML

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

C#

SfPolarChart chart = new SfPolarChart();
chart.Legend = new ChartLegend();

NOTE

Additionally, set a label for each series using the Label property of the chart series, which will be displayed in the corresponding legend.

XAML

<chart:SfPolarChart>
    . . .
    <chart:PolarLineSeries ItemsSource="{Binding PlantDetails}" XBindingPath="Direction" YBindingPath="Tree"
                Label="Tree"/>

    <chart:PolarLineSeries ItemsSource="{Binding PlantDetails}" XBindingPath="Direction" YBindingPath="Weed" 
                Label="Weed"/>

    <chart:PolarLineSeries ItemsSource="{Binding PlantDetails}" XBindingPath="Direction" YBindingPath="Flower" 
                Label="Flower"/>
</chart:SfPolarChart>

C#

PolarLineSeries series = new PolarLineSeries (); 
series.ItemsSource = (new ViewModel()).PlantDetails;
series.XBindingPath = "Direction"; 
series.YBindingPath = "Tree"; 
series.Label = "Tree";

PolarLineSeries series = new PolarLineSeries();
series.ItemsSource = (new ViewModel()).PlantDetails;
series.XBindingPath = "Direction";
series.YBindingPath = "Weed";
series.Label = "Weed";

PolarLineSeries series = new PolarLineSeries();
series.ItemsSource = (new ViewModel()).PlantDetails;
series.XBindingPath = "Direction";
series.YBindingPath = "Flower";
series.Label = "Flower";

Enable tooltip

Tooltips are used to display information about a segment when a user hovers over it. Enable the tooltip by setting the series EnableTooltip property to true.

XAML

<chart:SfPolarChart>
    ...
    <chart:PolarLineSeries EnableTooltip="True"/>
    ...
</chart:SfPolarChart>

C#

PolarLineSeries series = new PolarLineSeries();
series.EnableTooltip = true;

The following code example gives you the complete code of above configurations.

XAML

<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.Charts;assembly=Syncfusion.Maui.Charts"
    xmlns:model="clr-namespace:ChartGettingStarted">

    <ContentPage.BindingContext>
    <model:ViewModel></model:ViewModel>
    </ContentPage.BindingContext>

    <ContentPage.Content>
        <Grid>
            <chart:SfPolarChart>
                <chart:SfPolarChart.Title>
                    <Label Text="Plant Analysis" HorizontalTextAlignment="Center"/>
                </chart:SfPolarChart.Title>

                <chart:SfPolarChart.Legend>
                    <chart:ChartLegend/>
                </chart:SfPolarChart.Legend>
    
                <chart:SfPolarChart.PrimaryAxis>
                    <chart:CategoryAxis/>                    
                </chart:SfPolarChart.PrimaryAxis>

                <chart:SfPolarChart.SecondaryAxis>
                    <chart:NumericalAxis/>                   
                </chart:SfPolarChart.SecondaryAxis>

            <chart:PolarLineSeries ItemsSource="{Binding PlantDetails}" XBindingPath="Direction" YBindingPath="Tree" 
            Label="Tree" EnableTooltip="True" ShowDataLabels="True"/>

            <chart:PolarLineSeries ItemsSource="{Binding PlantDetails}" XBindingPath="Direction" YBindingPath="Weed" 
            Label="Weed" EnableTooltip="True" ShowDataLabels="True"/>

            <chart:PolarLineSeries ItemsSource="{Binding PlantDetails}" XBindingPath="Direction" YBindingPath="Flower" 
            Label="Flower" EnableTooltip="True" ShowDataLabels="True"/>
            </chart:SfPolarChart>
        </Grid>
    </ContentPage.Content>
</ContentPage>

C#

using Syncfusion.Maui.Charts;
namespace ChartGettingStarted
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();            
            SfPolarChart chart = new SfPolarChart();

            chart.Title = new Label
            {
                Text = "Plant Analysis",
                HorizontalTextAlignment="Center"
            };

            CategoryAxis primaryAxis = new CategoryAxis();
            chart.PrimaryAxis = primaryAxis;

            NumericalAxis secondaryAxis = new NumericalAxis()
            {
                Maximum = 100
            };
            chart.SecondaryAxis = secondaryAxis;

            PolarLineSeries series = new PolarLineSeries()
            {
                ItemsSource = (new ViewModel()).PlantDetails,
                XBindingPath = "Direction",
                YBindingPath = "Tree",
                Label="Tree", 
                EnableTooltip="True", 
                ShowDataLabels="True"
            }; 

            PolarLineSeries series = new PolarLineSeries()
            {
                ItemsSource = (new ViewModel()).PlantDetails,
                XBindingPath = "Direction",
                YBindingPath = "Weed",
                Label="Weed", 
                EnableTooltip="True", 
                ShowDataLabels="True"
            }; 

            PolarLineSeries series = new PolarLineSeries()
            {
                ItemsSource = (new ViewModel()).PlantDetails,
                XBindingPath = "Direction",
                YBindingPath = "Flower",
                Label="Flower", 
                EnableTooltip="True", 
                ShowDataLabels="True"
            };   

            chart.Series.Add(series);
            this.Content = chart;
        }
    }   
}

The following chart is created as a result of the previous codes.

You can find the complete getting started sample from this link.