Migrate from Xamarin.Forms SfChart to .NET MAUI SfPyramidChart

8 Jul 202618 minutes to read

The Pyramid Chart was created from scratch using the upgraded APIs and performance of the .NET MAUI graphics library and framework layouts. However, minor code changes are required. Additionally, the single SfChart control has been split into five specialized chart controls in .NET MAUI for improved user experience and clarity.

Xamarin .NET MAUI
SfChart
SfCartesianChart
SfCircularChart
SfFunnelChart
SfPyramidChart
SfPolarChart

To make migration easier, most of the APIs from Xamarin.Forms SfChart have been retained in .NET MAUI SfPyramidChart. Most features have been implemented, though some are pending or have limitations. Please refer to the API migration information and feature status below.

API migration

To initialize the control, import the Chart namespace and initialize SfPyramidChart, as shown in the following code samples.

Xamarin 
<ContentPage
    xmlns:chart="clr-namespace:Syncfusion.SfChart.XForms;assembly=Syncfusion.SfChart.XForms">

    <chart:SfChart/>
</ContentPage>
using Syncfusion.SfChart.XForms;

SfChart chart = new SfChart(); 
this.Content = chart;
.NET MAUI 
<ContentPage
    xmlns:chart="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts">
   
    <chart:SfPyramidChart/>
</ContentPage>
using Syncfusion.Maui.Charts;

SfPyramidChart chart = new SfPyramidChart();
// Configure data binding and properties here
this.Content = chart;

The following table illustrates the API migration for the chart.

Xamarin .NET MAUI
ColorModel, CustomBrushes PaletteBrushes
ChartBehaviors TooltipBehavior, SelectionBehavior

Series

The following properties are available in SfPyramidChart.

Xamarin.Forms .NET MAUI
Color -
ColorModel PaletteBrushes
SelectedDataPointColor SelectionBrush
DataMarker ShowDataLabels, DataLabelSettings

The following code example explains how to migrate the series of Xamarin SfChart to the .NET MAUI SfPyramidChart.

Xamarin 
<chart:SfChart>
    <chart:PyramidSeries ItemsSource="{Binding Data}" 
                         XBindingPath="XValue" 
                         YBindingPath="YValue"/>
</chart:SfChart>
SfChart chart = new SfChart();

PyramidSeries series = new PyramidSeries();
series.ItemsSource = Data;
series.XBindingPath = "XValue";
series.YBindingPath = "YValue";
chart.Series.Add(series);
this.Content = chart;
.NET MAUI 
<chart:SfPyramidChart ItemsSource="{Binding Data}" 
                      XBindingPath="XValue" 
                      YBindingPath="YValue">
</chart:SfPyramidChart>
SfPyramidChart chart = new SfPyramidChart();
ChartViewModel viewModel = new ChartViewModel();
chart.BindingContext = viewModel;
chart.ItemsSource = viewModel.Data;
chart.XBindingPath = "XValue";
chart.YBindingPath = "YValue";
this.Content = chart;

Legend

Xamarin.Forms .NET MAUI
DockPosition Placement
IsVisible IsVisible
Title Upcoming
ToggleSeriesVisibility ToggleSeriesVisibility
OverflowMode Upcoming
MaxWidth Upcoming
Orientation Upcoming
IsIconVisible Upcoming
ItemMargin Upcoming
IconWidth Upcoming
IconHeight Upcoming
OffsetX Upcoming
OffsetY Upcoming

The following code example shows how to enable legend in chart.

Xamarin 
<chart:SfChart>
    <chart:SfChart.Legend>
        <chart:ChartLegend/>
    </chart:SfChart.Legend>
</chart:SfChart>
SfChart chart = new SfChart();
chart.Legend = new ChartLegend();
this.Content = chart;
.NET MAUI 
<chart:SfPyramidChart>
    <chart:SfPyramidChart.Legend>
        <chart:ChartLegend/>
    </chart:SfPyramidChart.Legend>
</chart:SfPyramidChart>
SfPyramidChart chart = new SfPyramidChart();
chart.Legend = new ChartLegend();
this.Content = chart;

Data Label

Data Label

To customize the data label appearance, create an instance of the ChartDataMarker class and add it to the DataMarker of Series. For SfPyramidChart, you can set the PyramidDataLabelSettings instance to the DataLabelSettings property, as shown in the following code sample.

Data Label Property Migration

Xamarin.Forms .NET MAUI
ChartDataMarker.ShowLabel SfPyramidChart.ShowDataLabels
DataMarkerLabelStyle.TextColor ChartDataLabelStyle.TextColor
DataMarkerLabelStyle.BorderColor ChartDataLabelStyle.Stroke
DataMarkerLabelStyle.BorderThickness ChartDataLabelStyle.StrokeWidth
DataMarkerLabelStyle.BackgroundColor ChartDataLabelStyle.Background
DataMarkerLabelStyle.Angle ChartDataLabelStyle.Angle
DataMarkerLabelStyle.Margin ChartDataLabelStyle.Margin
DataMarkerLabelStyle.FontSize ChartDataLabelStyle.FontSize
DataMarkerLabelStyle.FontAttributes ChartDataLabelStyle.FontAttributes
Xamarin 
<chart:SfChart>  
    <chart:PyramidSeries ItemsSource ="{Binding Data}" 
                         XBindingPath="Name" 
                         YBindingPath="Value">
	<chart:PyramidSeries.DataMarker>
            <chart:ChartDataMarker ShowLabel="True">
                <chart:ChartDataMarker.LabelStyle>
                    <chart:DataMarkerLabelStyle TextColor="Blue"
                                                BorderColor="Red"
                                                BorderThickness="2"
                                                BackgroundColor="Aqua"
                                                Angle="315"
                                                Margin="5" 
                                                FontSize="18" 
                                                FontAttributes="Italic"/>
                </chart:ChartDataMarker.LabelStyle>
            </chart:ChartDataMarker>
	</chart:PyramidSeries.DataMarker>
    </chart:PyramidSeries>
</chart:SfChart>
SfChart chart = new SfChart();
PyramidSeries series = new PyramidSeries();
series.DataMarker = new ChartDataMarker();
series.DataMarker.ShowLabel = true;

var style = new DataMarkerLabelStyle();
style.TextColor = Color.Blue;
style.BorderColor = Color.Red;
style.BorderThickness = 2;
style.BackgroundColor = Color.Aqua;
style.Angle = 315;
style.Margin = 5;
style.FontSize = 18;
series.DataMarker.LabelStyle = style;

chart.Series.Add(series);
this.Content = chart;
.NET MAUI 
<chart:SfPyramidChart ItemsSource="{Binding Data}" 
                       XBindingPath="XValue" 
                       YBindingPath="YValue"
                       ShowDataLabels="True">
    <chart:SfPyramidChart.DataLabelSettings>
        <chart:PyramidDataLabelSettings>
            <chart:PyramidDataLabelSettings.LabelStyle>
                <chart:ChartDataLabelStyle TextColor="Blue" 
                                           Stroke="Red"
                                           StrokeWidth="2" 
                                           Background="Aqua" 
                                           Margin="10" 
                                           FontSize="16"
                                           FontAttributes="Bold"/>
            </chart:PyramidDataLabelSettings.LabelStyle>
        </chart:PyramidDataLabelSettings>
    </chart:SfPyramidChart.DataLabelSettings>
 </chart:SfPyramidChart>
SfPyramidChart chart = new SfPyramidChart();
chart.ItemsSource = viewModel.Data;
chart.XBindingPath = "XValue";
chart.YBindingPath = "YValue";
chart.ShowDataLabels = true;
chart.DataLabelSettings = new PyramidDataLabelSettings();
var style = new ChartDataLabelStyle();
style.TextColor = Colors.Blue;
style.Stroke = Colors.Red;
style.StrokeWidth = 2;
style.Background = Colors.Aqua;
style.Margin = 10;
style.FontSize = 16;
style.FontAttributes = FontAttributes.Bold;
chart.DataLabelSettings.LabelStyle = style;
this.Content = chart;

Tooltip

To customize the tooltip appearance, create an instance of the ChartTooltipBehavior class and add it to the ChartBehaviors collection of SfChart. For SfPyramidChart, you can directly set the ChartTooltipBehavior instance to the TooltipBehavior property, as shown in the following code sample.

Tooltip Property Migration

Xamarin.Forms .NET MAUI
ChartTooltipBehavior.BackgroundColor ChartTooltipBehavior.Background
ChartTooltipBehavior.TextColor ChartTooltipBehavior.TextColor
ChartTooltipBehavior.Margin ChartTooltipBehavior.Margin
ChartTooltipBehavior.FontSize ChartTooltipBehavior.FontSize
Xamarin 
<chart:SfChart>
    <chart:SfChart.ChartBehaviors>
        <chart:ChartTooltipBehavior BackgroundColor="Blue" 
                                    TextColor="White" 
                                    Margin="5"
                                    FontSize="15"/>
    </chart:SfChart.ChartBehaviors>
    
    <chart:PyramidSeries ItemsSource="{Binding Data}" 
                         XBindingPath="Name"
                         YBindingPath="Value"
                         EnableTooltip="True"/>
</chart:SfChart>
SfChart chart = new SfChart();
PyramidSeries  series = new PyramidSeries ();
series.EnableTooltip = true;
chart.Series.Add(series);

ChartTooltipBehavior tool = new ChartTooltipBehavior();
tool.BackgroundColor = Color.Blue;
tool.TextColor = Color.White;
tool.Margin = new Thickness(5, 5, 5, 5);
tool.FontSize = 15;
chart.ChartBehaviors.Add(tool);
this.Content = chart;
.NET MAUI 
<chart:SfPyramidChart ItemsSource="{Binding Data}" 
                      XBindingPath="XValue"  
                      YBindingPath="YValue"
                      EnableTooltip="True">
    <chart:SfPyramidChart.TooltipBehavior>
        <chart:ChartTooltipBehavior Background="Blue" 
                                    TextColor="White" 
                                    Margin="5" 
                                    FontSize="15"/>
    </chart:SfPyramidChart.TooltipBehavior>
</chart:SfPyramidChart>
SfPyramidChart chart = new SfPyramidChart();
chart.ItemsSource = viewModel.Data;
chart.XBindingPath = "XValue";
chart.YBindingPath = "YValue";
chart.EnableTooltip = true;
ChartTooltipBehavior tooltip = new ChartTooltipBehavior();
tooltip.Background = Colors.Blue;
tooltip.TextColor = Colors.White;
tooltip.Margin = new Thickness(5, 5, 5, 5);
tooltip.FontSize = 15;
chart.TooltipBehavior = tooltip;
this.Content = chart;

Selection

Create an instance of the ChartSelectionBehavior class and add it to the ChartBehaviors collection of SfChart. For SfPyramidChart, you can directly set the DataPointSelectionBehavior instance to the SelectionBehavior property, as shown in the following code sample.

Selection Property Migration

Xamarin.Forms .NET MAUI
PyramidSeries.EnableDataPointSelection DataPointSelectionBehavior (automatic on selection)
PyramidSeries.SelectedDataPointIndex DataPointSelectionBehavior.SelectedIndex
PyramidSeries.SelectedDataPointColor DataPointSelectionBehavior.SelectionBrush
Xamarin 
<chart:SfChart>
    <chart:SfChart.ChartBehaviors>
        <chart:ChartSelectionBehavior/>
    </chart:SfChart.ChartBehaviors>

    <chart:PyramidSeries EnableDataPointSelection="True" 
                         SelectedDataPointIndex="2" 
                         SelectedDataPointColor="Red" 
                         ItemsSource ="{Binding Data}" 
                         XBindingPath="Name" 
                         YBindingPath="Value"/>
</chart:SfChart>
SfChart chart = new SfChart();
PyramidSeries series = new PyramidSeries();
series.EnableDataPointSelection = true;
series.SelectedDataPointIndex = 2;
series.SelectedDataPointColor = Color.Red;
ChartSelectionBehavior selectionBehavior = new ChartSelectionBehavior();
chart.ChartBehaviors.Add(selectionBehavior);
chart.Series.Add(series);
this.Content = chart;
.NET MAUI 
<chart:SfPyramidChart ItemsSource="{Binding Data}" 
                      XBindingPath="XValue"      
                      YBindingPath="YValue">
    <chart:SfPyramidChart.SelectionBehavior>
        <chart:DataPointSelectionBehavior SelectedIndex="2" 
                                          SelectionBrush="Red"/>
    </chart:SfPyramidChart.SelectionBehavior>
</chart:SfPyramidChart>
SfPyramidChart chart = new SfPyramidChart();
chart.ItemsSource = viewModel.Data;
chart.XBindingPath = "XValue";
chart.YBindingPath = "YValue";
DataPointSelectionBehavior selection = new DataPointSelectionBehavior();
selection.SelectedIndex = 2;
selection.SelectionBrush = Colors.Red;
chart.SelectionBehavior = selection;
this.Content = chart;

Upcoming features in .NET MAUI

Chart

  • Listen to property change support for chart.
  • Notify event or method when chart is rendering.
  • Suspend and resume notification.
  • Support for chart animation.
  • Exploding segments on touch.

Legend

  • Title support for legend.
  • Support to enable or disable the legend icon visibility.
  • Legend floating support.
  • Event or method to notify when a legend item is clicked.

Data label

  • Connector lines customization support.

Unsupported features from Xamarin.Forms

  • In .NET MAUI, the ChartDataPoint model class is no longer available. Instead, create your own model class with the required properties for data binding.

Support and feedback

If you are unable to find the migration information you require in the self-help resources listed above, please contact us by creating a support ticket. Do not see what you need? Please request it in our feedback portal.