Migrate from Xamarin.Forms SfChart to .NET MAUI SfPolarChart

20 Jul 202615 minutes to read

The Polar 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 SfPolarChart. Currently, most of the features have been added in the SfPolarChart, 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 SfPolarChart 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();
// code omitted for brevity
this.Content = chart;
.NET MAUI 
<ContentPage
    xmlns:chart = "clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts">
    <chart:SfPolarChart/>
</ContentPage>
using Syncfusion.Maui.Charts;

SfPolarChart chart = new SfPolarChart();
// code omitted for brevity
this.Content = chart;

The following table illustrates the API migration for the chart.

Xamarin .NET MAUI
Title Title
Legend Legend
Series Series
PrimaryAxis PrimaryAxis
SecondaryAxis SecondaryAxis
ColorModel, CustomBrushes PaletteBrushes
ChartBehaviors TooltipBehavior

Axis

Xamarin .NET MAUI
VisibleMinimum VisibleMinimum
VisibleMaximum VisibleMaximum
VisibleLabels VisibleLabels
LabelClicked Upcoming
TickPosition TickPosition
MaximumLabels Upcoming
LabelsIntersectAction Upcoming

The following code example explains how to migrate the axis of Xamarin SfChart to .NET MAUI SfPolarChart.

Xamarin 
<chart:SfChart>  
	<chart:SfChart.PrimaryAxis>
		 <chart:CategoryAxis/>
	</chart:SfChart.PrimaryAxis>

	<chart:SfChart.SecondaryAxis>
		 <chart:NumericalAxis/>
	</chart:SfChart.SecondaryAxis>
</chart:SfChart>
SfChart chart = new SfChart();
CategoryAxis primaryAxis = new CategoryAxis();
chart.PrimaryAxis = primaryAxis;
NumericalAxis secondaryAxis  =  new NumericalAxis();
chart.SecondaryAxis = secondaryAxis;
this.Content = chart;
.NET MAUI 
<chart:SfPolarChart>                            
    <chart:SfPolarChart.PrimaryAxis>
        <chart:CategoryAxis/>
    </chart:SfPolarChart.PrimaryAxis>
    
    <chart:SfPolarChart.SecondaryAxis>
        <chart:NumericalAxis/>
    </chart:SfPolarChart.SecondaryAxis>                       
</chart:SfPolarChart>
SfPolarChart chart = new SfPolarChart();
CategoryAxis primaryAxis = new CategoryAxis();
chart.PrimaryAxis = primaryAxis;
NumericalAxis secondaryAxis  =  new NumericalAxis();
chart.SecondaryAxis = secondaryAxis;
this.Content = chart;

Series

Xamarin .NET MAUI
Color Fill
DataMarker ShowDataLabels, DataLabelSettings
IsClosed IsClosed
ListenPropertyChange ListenPropertyChange

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

Xamarin 
<chart:SfChart>
    <!-- code omitted for brevity -->
    <chart:PolarAreaSeries ItemsSource = "{Binding PlantDetails}" XBindingPath = "Direction" YBindingPath = "Tree">
    </chart:PolarAreaSeries>
</chart:SfChart>
SfChart chart = new SfChart();
// code omitted for brevity
PolarAreaSeries series = new PolarAreaSeries();
series.SetBinding(ChartSeries.ItemsSourceProperty, "PlantDetails");
series.XBindingPath = "Direction";
series.YBindingPath = "Tree";
chart.Series.Add(series);
this.Content = chart;
.NET MAUI 
<chart:SfPolarChart>
    <chart:PolarAreaSeries ItemsSource = "{Binding PlantDetails}" XBindingPath = "Direction" YBindingPath = "Tree" ShowDataLabels = "True">
    </chart:PolarAreaSeries>
</chart:SfPolarChart>
SfPolarChart chart = new SfPolarChart();
// code omitted for brevity
PolarAreaSeries series = new PolarAreaSeries();
series.ItemsSource = (new ViewModel()).PlantDetails;
series.XBindingPath = "Direction";
series.YBindingPath = "Tree";
series.ShowDataLabels = true;
chart.Series.Add(series);
this.Content = chart;

Legend

Xamarin .NET MAUI
ToggleSeriesVisibility ToggleSeriesVisibility
DockPosition Placement
IsVisible IsVisible
ItemTemplate ItemTemplate
Title Upcoming
OverflowMode Upcoming
MaxWidth Upcoming
Orientation Upcoming
IsIconVisible Upcoming
ItemMargin Upcoming
IconWidth Upcoming
IconTree Upcoming
- IsFloating
OffsetX OffsetX
OffsetY OffsetY

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();
// code omitted for brevity
chart.Legend = new ChartLegend();
this.Content = chart;
.NET MAUI 
<chart:SfPolarChart>
    <chart:SfPolarChart.Legend>
        <chart:ChartLegend/>
    </chart:SfPolarChart.Legend>
</chart:SfPolarChart>
SfPolarChart chart = new SfPolarChart();
// code omitted for brevity
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 SfPolarChart, you can set the PolarDataLabelSettings instance to the DataLabelSettings property, as shown in the below code sample.

Xamarin 
<chart:SfChart>  
     <!-- code omitted for brevity -->
    <chart:PolarAreaSeries ItemsSource = "{Binding PlantDetails}" XBindingPath = "Direction" YBindingPath = "Tree">
	    <chart:PolarAreaSeries.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:PolarAreaSeries.DataMarker>
    </chart:PolarAreaSeries>
</chart:SfChart>
SfChart chart = new SfChart();
// code omitted for brevity
PolarAreaSeries series = new PolarAreaSeries();
// code omitted for brevity
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:SfPolarChart>
    <!-- code omitted for brevity --> 
    <chart:PolarAreaSeries ItemsSource = "{Binding PlantDetails}" XBindingPath = "Direction" YBindingPath = "Tree" 
                           ShowDataLabels = "True">
        <chart:PolarAreaSeries.DataLabelSettings>
            <chart:PolarDataLabelSettings>
                <chart:PolarDataLabelSettings.LabelStyle>
                    <chart:ChartDataLabelStyle TextColor = "Blue" Stroke = "Red" StrokeWidth = "2" Background = "Aqua" 
                                               Angle = "315" Margin = "5" FontSize = "18" FontAttributes = "Italic"/>
                </chart:PolarDataLabelSettings.LabelStyle>
            </chart:PolarDataLabelSettings>
        </chart:PolarAreaSeries.DataLabelSettings>  
    </chart:PolarAreaSeries>
</chart:SfPolarChart>
SfPolarChart chart = new SfPolarChart();
// code omitted for brevity
PolarAreaSeries series = new PolarAreaSeries();
// code omitted for brevity
series.ShowDataLabels = true;
series.PolarDataLabelSettings = new PolarDataLabelSettings();
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.PolarDataLabelSettings.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 SfPolarChart, you can directly set the ChartTooltipBehavior instance to the TooltipBehavior property, as shown in the below code sample.

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

   <chart:PolarAreaSeries ItemsSource = "{Binding PlantDetails}" XBindingPath = "Direction" YBindingPath = "Tree"
                          EnableTooltip = "True"/>
</chart:SfPolarChart>
SfPolarChart chart = new SfPolarChart();
// code omitted for brevity
PolarAreaSeries series = new PolarAreaSeries();
// code omitted for brevity
series.EnableTooltip = true;
chart.Series.Add(series);

ChartTooltipBehavior tooltip = new ChartTooltipBehavior();
tooltip.BackgroundColor = Color.Blue;
tooltip.TextColor = Color.White;
tooltip.Margin = new Thickness(5, 5, 5, 5);
tooltip.FontSize = 15;
chart.TooltipBehavior = tooltip;
this.Content = chart;

Upcoming features in .NET MAUI

Chart

  • Suspend and resume notification support.

Series

  • Notify event or method when series are rendering.
  • Suspend and resume notification.

Axis

  • DateTime category axis support.
  • Range style customization.
  • Event or method to notify the axis label click.

Legend

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

Known issue

  • #FB49487 - Gradient Support for Line-Based Series in .NET MAUI Chart.

Unsupported Features and Limitations in .NET MAUI

The following features from Xamarin.Forms are not supported in .NET MAUI:

  • Data label creation events — Create a custom data label handler instead by using the DrawDataLabel override method.
  • ChartDataPoint model class — Use your own custom data model instead.

Limitations

Features Comments
LabelRotation This feature supports for secondary axis only.
AxisLineStyle This feature supports for secondary axis only.
AxisLineOffset This feature supports for secondary axis only.
CrossesAt This feature is currently not supported for Polar charts.
RenderNextToCrossingValue This feature is currently not supported for Polar charts.
CrossAxisName This feature is currently not supported for Polar charts.
Axis Title This feature supports for secondary axis only.
EdgeLabelsDrawingMode This feature supports for secondary axis only.
EnableAutoIntervalOnZooming This feature is currently not supported for Polar charts.
LabelPlacement This feature is currently not supported for Primary axis.
ArrangeByIndex This feature is currently not supported for Primary axis.
AutoScrollingDeltaType This feature is currently not supported for DateTime axis.
SelectionBehavior(Upcoming) This feature is currently not supported for Polar Charts.
AutoScrollingDelta This feature is currently not supported for Polar Charts.
AutoScrollingMode This feature is currently not supported for Polar Charts.
ZoomPosition This feature is currently not supported for Polar Charts.
ZoomFactor This feature is currently not supported for Polar Charts.
ShowTrackballLabel This feature is not supported for Polar Charts.
TrackballLabelStyle This feature is not supported for Polar Charts.

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.