Migrate from Xamarin.Forms SfChart to .NET MAUI SfCircularChart

30 Oct 202419 minutes to read

The Circular Chart was created from the scratch using the upgraded APIs and performance of the .NET MAUI graphics library and framework layouts. However, a minor code change is required. In addition, SfChart has been divided into five chart controls in .NET MAUI for a better user experience and understanding.

Xamarin .NET MAUI
SfChart
SfCartesianChart
SfCircularChart
SfFunnelChart
SfPyramidChart
SfPolarChart

To make the migration easier, the majority of the APIs from the Xamarin SfChart were kept in the .NET MAUI SfCircularChart. Currently, most of the features have been added in the SfCircularChart, but only a few are pending in the .NET MAUI along with some limitations. Please refer to the following details and the API migration information available below.

API migration

To initialize the control, import the Chart namespace and Initialize SfCircularChart as shown in the following code sample.

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:SfCircularChart/>
</ContentPage>
using Syncfusion.Maui.Charts;
. . .
SfCircularChart chart = new SfCircularChart(); 
this.Content = chart;

The following table illustrates the API migration for the chart.

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

Series

Xamarin .NET MAUI
Color Fill
ColorModel PaletteBrushes
DataMarker ShowDataLabels, DataLabelSettings

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

Xamarin 
<chart:SfChart>
    <chart:PieSeries ItemsSource="{Binding Data}" 
                     XBindingPath="Product" 
                     YBindingPath="SalesRate">
    </chart:PieSeries>
 </chart:SfChart>
SfChart chart = new SfChart();
. . .
PieSeries series = new PieSeries();
series.ItemsSource = viewModel.Data;
series.XBindingPath = "Product";
series.YBindingPath = "SalesRate";
chart.Series.Add(series);
this.Content = chart;
.NET MAUI 
<chart:SfCircularChart>
    <chart:PieSeries ItemsSource="{Binding Data}" 
                     XBindingPath="Product" 
                     YBindingPath="SalesRate"/>
</chart:SfCircularChart>
SfCircularChart chart = new SfCircularChart();
. . .
ChartViewModel viewModel = new ChartViewModel();
chart.BindingContext = viewModel;
PieSeries series = new PieSeries();
series.ItemsSource = viewModel.Data;
series.XBindingPath = "Product";
series.YBindingPath = "SalesRate";
chart.Series.Add(series);
this.Content = chart;

Legend

Xamarin .NET MAUI
DockPosition Placement
IsVisible IsVisible
ItemTemplate ItemTemplate
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:SfCircularChart>
    . . .
    <chart:SfCircularChart.Legend>
        <chart:ChartLegend/>
    </chart:SfCircularChart.Legend>
</chart:SfCircularChart>
SfCircularChart chart = new SfCircularChart();
. . .
chart.Legend = new ChartLegend();
this.Content = chart;

Data Label

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

Xamarin 
<chart:SfChart>  
    <chart:PieSeries ItemsSource ="{Binding Data}" XBindingPath="Expense" YBindingPath="Value">
        <chart:PieSeries.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:PieSeries.DataMarker>
    </chart:PieSeries>
</chart:SfChart>
SfChart chart = new SfChart();
. . .
PieSeries series = new PieSeries();
. . .
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:SfCircularChart>
    . . .
    <chart:PieSeries ShowDataLabels="True"
                     ItemsSource ="{Binding Data}" 
                     XBindingPath="Expense"
	             YBindingPath="Value">
        <chart:PieSeries.DataLabelSettings>
            <chart:CircularDataLabelSettings>
                <chart:CircularDataLabelSettings.LabelStyle>
                    <chart:ChartDataLabelStyle TextColor="Blue" 
                                               Stroke="Red" 
                                               StrokeWidth="2" 
                                               Background="Aqua" 
                                               Angle="315" 
                                               Margin="5" 
                                               FontSize="18"
                                               FontAttributes="Italic"/>
                </chart:CircularDataLabelSettings.LabelStyle>
            </chart:CircularDataLabelSettings>
        </chart:PieSeries.DataLabelSettings>  
    </chart:PieSeries>
</chart:SfCircularChart>
SfCircularChart chart = new SfCircularChart();
. . .
PieSeries series = new PieSeries();
series.ShowDataLabels = true;
. . .
series.CircularDataLabelSettings = new CircularDataLabelSettings();
var style = new ChartDataLabelStyle();
style.TextColor = Color.Blue;
style.Stroke = Color.Red;
style.StrokeWidth = 2;
style.Background = Color.Aqua;
style.Angle = 315;
style.Margin = 5;
style.FontSize = 18;
series.CircularDataLabelSettings.LabelStyle = style;
chart.Series.Add(series);
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 SfCircularChart, you can directly set the ChartTooltipBehavior instance to the TooltipBehavior property, as shown in the below code sample.

Xamarin 
<chart:SfChart>
    . . . 
    <chart:SfChart.ChartBehaviors>
	    <chart:ChartTooltipBehavior BackgroundColor="Blue" 
                                    TextColor="White" 
                                    Margin="5"
                                    FontSize="15"/>
    </chart:SfChart.ChartBehaviors>
    
    <chart:PieSeries ItemsSource="{Binding Data}" 
                     XBindingPath="Demand"
                     YBindingPath="Year2010"
                     EnableTooltip="True"/>
</chart:SfChart>
SfChart chart = new SfChart();
. . .
PieSeries  series = new PieSeries ();
. . .
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:SfCircularChart>
    . . .
    <chart:SfCircularChart.TooltipBehavior>
        <chart:ChartTooltipBehavior Background="Blue" 
                                    TextColor="White" 
                                    Margin="5" 
                                    FontSize="15"/>
   </chart:SfCircularChart.TooltipBehavior>

   <chart:PieSeries ItemsSource="{Binding Data}" 
                    XBindingPath="Demand"
                    YBindingPath="Year2010"
                    EnableTooltip="True"/>
</chart:SfCircularChart>
SfCircularChart chart = new SfCircularChart();
. . .
PieSeries series = new PieSeries();
. . .
series.EnableTooltip = true;
chart.Series.Add(series);

ChartTooltipBehavior tooltip = new ChartTooltipBehavior();
tooltip.BackgroundColor = 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 SfCircularChart, you can directly set the ChartSelectionBehavior instance to the SelectionBehavior property, as shown in the below code sample.

Xamarin 
<chart:SfChart>
    ...
    <chart:SfChart.ChartBehaviors>
        <chart:ChartSelectionBehavior/>
    </chart:SfChart.ChartBehaviors>

    <chart:PieSeries EnableDataPointSelection="True" 
                     SelectedDataPointIndex="2" 
                     electedDataPointColor="Red" 
                     ItemsSource ="{Binding Data}" 
                     XBindingPath="Demand" 
                     YBindingPath="Year2010"/>
</chart:SfChart>
SfChart chart = new SfChart();
. . .
PieSeries series = new PieSeries();
. . .
series.EnableDataPointSelection = true;
series.SelectedDataPointIndex = 2;
series.SelectedDataPointColor = "Red";

chart.Series.Add(series);
ChartSelectionBehavior selectionBehavior = new ChartSelectionBehavior();

chart.ChartBehaviors.Add(selectionBehavior);
this.Content = chart;
.NET MAUI 
<chart:SfCircularChart>
    <chart:SfCircularChart.Series>
        <chart:PieSeries>
            <chart:PieSeries.SelectionBehavior>
                <chart:DataPointSelectionBehavior SelectionBrush="#314A6E"/>
            </chart:PieSeries.SelectionBehavior>
        </chart:PieSeries>
    </chart:SfCircularChart.Series>
</chart:SfCircularChart>
SfCircularChart chart = new SfCircularChart();
...
DataPointSelectionBehavior selection = new DataPointSelectionBehavior();
selection.SelectionBrush="#314A6E";

PieSeries series = new PieSeries();
series.SelectionBehavior = selection;
chart.Series.Add(series);
this.Content = chart;

NOTE

For more information about selection check here.

Upcoming features in .NET MAUI

Series

  • Listen to property change support for series.
  • Notify event or method when series are rendering.
  • Suspend and resume notification.

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.
  • The ability to show/hide corresponding data points by legend item toggle.

Known issue

  • [iOS] #9135 - The chart legend was taking up a huge amount of vertical space or becoming hidden.

Unsupported features from Xamarin.Forms

  • Data label created event support was not provided in series. Instead, you can use the DrawDataLabel override method in the ChartSeries class.
  • In.NET MAUI, the ChartDataPoint model class was no longer available. Instead, create your own model.

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.