Migrate from Xamarin.Forms SunburstChart to .NET MAUI SunburstChart

9 Jul 202619 minutes to read

The SfSunburstChart was created from scratch using the upgraded APIs and performance of the .NET MAUI graphics library and framework layouts. However, to maintain API naming consistency in .NET MAUI SfSunburstChart, we renamed some of the APIs. The changes in APIs from Xamarin SfSunburstChart to .NET MAUI SfSunburstChart are detailed below.

Namespaces

Xamarin .NET MAUI
Syncfusion.SfSunburstChart.XForms Syncfusion.Maui.SunburstChart

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

Initialize the control

To initialize the control, import the sunburst chart namespace and initialize SfSunburstChart as shown in the following code sample:

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

    <sunburst:SfSunburstChart/>

</ContentPage>
using Syncfusion.SfSunburstChart.XForms;
// code omitted for brevity

SfSunburstChart sunburstChart = new SfSunburstChart(); 
this.Content = sunburstChart;
.NET MAUI 
<ContentPage
    xmlns:sunburst="clr-namespace:Syncfusion.Maui.SunburstChart;assembly=Syncfusion.Maui.SunburstChart">

    <sunburst:SfSunburstChart/>

</ContentPage>
using Syncfusion.Maui.SunburstChart;
// code omitted for brevity
SfSunburstChart sunburstChart = new SfSunburstChart(); 
this.Content = sunburstChart;

API migration

The following table illustrates the API migration for the sunburst chart.

SunburstChart

Xamarin .NET MAUI
Title Title
Legend Legend
Levels Levels
StrokeColor Stroke
SunburstChartDataLabel.ShowLabel SfSunburstChart.ShowLabels
SunburstTooltipSettings.ShowTooltip SfSunburstChart.EnableTooltip
SunburstTooltipSettings.TooltipTemplate SfSunburstChart.TooltipTemplate
DataLabel DataLabelSettings
TooltipSettings TooltipSettings
ColorModel, CustomBrushes, Palette PaletteBrushes

The following code example explains how to migrate from Xamarin SfSunburstChart to .NET MAUI SfSunburstChart:

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

    <sunburst:SfSunburstChart ItemsSource="{Binding DataSource}"
                              ValueMemberPath="EmployeesCount">
        <sunburst:SfSunburstChart.Levels>
            <sunburst:SunburstHierarchicalLevel GroupMemberPath="Country"/>
            <sunburst:SunburstHierarchicalLevel GroupMemberPath="JobDescription"/>
            <sunburst:SunburstHierarchicalLevel GroupMemberPath="JobGroup"/>
            <sunburst:SunburstHierarchicalLevel GroupMemberPath="JobRole"/>
        </sunburst:SfSunburstChart.Levels>
    </sunburst:SfSunburstChart>
</ContentPage>
using Syncfusion.SfSunburstChart.XForms;
// code omitted for brevity

SfSunburstChart sunburstChart = new SfSunburstChart(); 
sunburstChart.SetBinding(SfSunburstChart.ItemsSourceProperty, "DataSource");
sunburstChart.ValueMemberPath = "EmployeesCount";
sunburstChart.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "Country" });
sunburstChart.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "JobDescription" });
sunburstChart.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "JobGroup" });
sunburstChart.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "JobRole" });
this.Content = sunburstChart;
.NET MAUI 
<ContentPage
    xmlns:sunburst="clr-namespace:Syncfusion.Maui.SunburstChart;assembly=Syncfusion.Maui.SunburstChart">

    <sunburst:SfSunburstChart ItemsSource="{Binding DataSource}"
                              ValueMemberPath="EmployeesCount">
        <sunburst:SfSunburstChart.Levels>
            <sunburst:SunburstHierarchicalLevel GroupMemberPath="Country"/>
            <sunburst:SunburstHierarchicalLevel GroupMemberPath="JobDescription"/>
            <sunburst:SunburstHierarchicalLevel GroupMemberPath="JobGroup"/>
            <sunburst:SunburstHierarchicalLevel GroupMemberPath="JobRole"/>
        </sunburst:SfSunburstChart.Levels>
    </sunburst:SfSunburstChart>
</ContentPage>
using Syncfusion.Maui.SunburstChart;

SfSunburstChart sunburstChart = new SfSunburstChart();

sunburstChart.SetBinding(SfSunburstChart.ItemsSourceProperty, "DataSource");
sunburstChart.ValueMemberPath = "EmployeesCount";
sunburstChart.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "Country" });
sunburstChart.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "JobDescription" });
sunburstChart.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "JobGroup" });
sunburstChart.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "JobRole" });

this.Content = sunburstChart;

Legend

Xamarin .NET MAUI
IsVisible IsVisible
LegendPosition Placement
LabelStyle Upcoming
IconType Upcoming
ItemMargin Upcoming
IconHeight Upcoming
ItemWidth Upcoming

The following code example shows how to enable the legend in the sunburst chart:

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

    <sunburst:SfSunburstChart.Legend>
        <sunburst:SunburstChartLegend x:Name="legend"
                                      IsVisible="True"
                                      LegendPosition="Left">
        </sunburst:SunburstChartLegend>
    </sunburst:SfSunburstChart.Legend>
    <!-- code omitted for brevity -->
</ContentPage>
using Syncfusion.SfSunburstChart.XForms;
// code omitted for brevity
SfSunburstChart sunburstChart = new SfSunburstChart();

SunburstChartLegend legend = new SunburstChartLegend();
legend.IsVisible = true;
legend.LegendPosition = SunburstDockPosition.Left;
sunburstChart.Legend = legend;

this.Content = sunburstChart;
.NET MAUI 
<ContentPage
    xmlns:sunburst="clr-namespace:Syncfusion.Maui.SunburstChart;assembly=Syncfusion.Maui.SunburstChart">

    <sunburst:SfSunburstChart.Legend>
        <sunburst:SunburstLegend Placement="Left" IsVisible="True"/>
    </sunburst:SfSunburstChart.Legend>
    <!-- code omitted for brevity -->
</ContentPage>
using Syncfusion.Maui.SunburstChart;

SfSunburstChart sunburstChart = new SfSunburstChart();

sunburstChart.Legend = new SunburstLegend()
{
    Placement = LegendPlacement.Left,
    IsVisible = true
};

this.Content = sunburstChart;

Data label

To enable data labels, use the ShowLabel property in the SunburstChartDataLabel class in Xamarin and the ShowLabels property in the SfSunburstChart class in .NET MAUI.

To customize the data label appearance, create an instance of the SunburstDataLabelSettings class and add it to the DataLabelSettings of SfSunburstChart. The following code shows how to initialize data labels:

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

    <sunburst:SfSunburstChart.DataLabel>
        <sunburst:SunburstChartDataLabel ShowLabel="True" FontAttributes="Bold" 
                                         FontSize="10" TextColor="Red">
        </sunburst:SunburstChartDataLabel>
    </sunburst:SfSunburstChart.DataLabel>

</ContentPage>
using Syncfusion.SfSunburstChart.XForms;
// code omitted for brevity
SfSunburstChart sunburstChart = new SfSunburstChart();
SunburstChartDataLabel label = new SunburstChartDataLabel();
label.ShowLabel = true;
label.TextColor = Color.Red;
label.FontSize = 10;
label.FontAttributes = FontAttributes.Bold;
label.FontFamily = "ArialMT";
sunburstChart.DataLabel = label;

this.Content = sunburstChart;
.NET MAUI 
<ContentPage
    xmlns:sunburst="clr-namespace:Syncfusion.Maui.SunburstChart;assembly=Syncfusion.Maui.SunburstChart">

    <sunburst:SfSunburstChart ItemsSource="{Binding DataSource}" ShowLabels="True" 
                              ValueMemberPath="EmployeesCount">

        <sunburst:SfSunburstChart.DataLabelSettings>
            <sunburst:SunburstDataLabelSettings FontSize="13" FontAttributes="Italic"
                                                RotationMode="Angle" OverFlowMode="Trim" />
        </sunburst:SfSunburstChart.DataLabelSettings>

        <sunburst:SfSunburstChart.Levels>
            <sunburst:SunburstHierarchicalLevel GroupMemberPath="Country"/>
            <sunburst:SunburstHierarchicalLevel GroupMemberPath="JobDescription"/>
            <sunburst:SunburstHierarchicalLevel GroupMemberPath="JobGroup"/>
            <sunburst:SunburstHierarchicalLevel GroupMemberPath="JobRole"/>
        </sunburst:SfSunburstChart.Levels>
    </sunburst:SfSunburstChart>

</ContentPage>
using Syncfusion.Maui.SunburstChart;

SfSunburstChart sunburstChart = new SfSunburstChart();

sunburstChart.ShowLabels = true;
sunburstChart.DataLabelSettings = new SunburstDataLabelSettings()
{
    OverFlowMode = SunburstLabelOverflowMode.Trim,
    RotationMode = SunburstLabelRotationMode.Angle,
    FontAttributes = FontAttributes.Italic,
    FontSize = 13
};

sunburstChart.SetBinding(SfSunburstChart.ItemsSourceProperty, "DataSource");
sunburstChart.ValueMemberPath = "EmployeesCount";
sunburstChart.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "Country" });
sunburstChart.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "JobDescription" });
sunburstChart.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "JobGroup" });
sunburstChart.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "JobRole" });

this.Content = sunburstChart;

Tooltip

To enable the tooltip, use the ShowTooltip property in the SunburstTooltipSettings class in Xamarin and the EnableTooltip property in the SfSunburstChart class in .NET MAUI.

To customize the tooltip appearance, create an instance of the SunburstTooltipSettings class and add it to the TooltipSettings of SfSunburstChart.

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

    <sunburst:SfSunburstChart.TooltipSettings>
        <sunburst:SunburstTooltipSettings ShowTooltip="True" TextColor="White" Duration="2000"
                                          BackgroundColor="Green" BorderColor="Black" BorderWidth="1">
        </sunburst:SunburstTooltipSettings>
    </sunburst:SfSunburstChart.TooltipSettings>

</ContentPage>
using Syncfusion.SfSunburstChart.XForms;
// code omitted for brevity
SfSunburstChart sunburstChart = new SfSunburstChart();

SunburstTooltipSettings tooltipSettings = new SunburstTooltipSettings();
tooltipSettings.ShowTooltip = true;
tooltipSettings.TextColor = Color.White;
tooltipSettings.BackgroundColor = Color.Green;
tooltipSettings.BorderColor = Color.Black;
tooltipSettings.BorderWidth = 1;
tooltipSettings.Duration = 2000;
sunburstChart.TooltipSettings = tooltipSettings;

this.Content = sunburstChart;
.NET MAUI 
<ContentPage
    xmlns:sunburst="clr-namespace:Syncfusion.Maui.SunburstChart;assembly=Syncfusion.Maui.SunburstChart">

    <sunburst:SfSunburstChart ItemsSource="{Binding DataSource}" EnableTooltip="True" 
                              ValueMemberPath="EmployeesCount">

        <sunburst:SfSunburstChart.TooltipSettings>
            <sunburst:SunburstTooltipSettings TextColor="Black"
                                              FontSize="14" Duration="2"
                                              Background="Gray"
                                              Stroke="Black" StrokeWidth="1"/>
        </sunburst:SfSunburstChart.TooltipSettings>

        <sunburst:SfSunburstChart.Levels>
            <sunburst:SunburstHierarchicalLevel GroupMemberPath="Country"/>
            <sunburst:SunburstHierarchicalLevel GroupMemberPath="JobDescription"/>
            <sunburst:SunburstHierarchicalLevel GroupMemberPath="JobGroup"/>
            <sunburst:SunburstHierarchicalLevel GroupMemberPath="JobRole"/>
        </sunburst:SfSunburstChart.Levels>
    </sunburst:SfSunburstChart>

</ContentPage>
using Syncfusion.Maui.SunburstChart;

SfSunburstChart sunburstChart = new SfSunburstChart();

sunburstChart.EnableTooltip = true;
sunburstChart.TooltipSettings = new SunburstTooltipSettings()
{
    Background = Colors.Gray,
    TextColor = Colors.Black,
    Stroke = Colors.Black,
    StrokeWidth = 1,
    Duration = 2,
    FontSize = 14
};

sunburstChart.SetBinding(SfSunburstChart.ItemsSourceProperty, "DataSource");
sunburstChart.ValueMemberPath = "EmployeesCount";
sunburstChart.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "Country" });
sunburstChart.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "JobDescription" });
sunburstChart.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "JobGroup" });
sunburstChart.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "JobRole" });

this.Content = sunburstChart;

Selection

Selection in Xamarin was enabled by assigning a SunburstSelectionSettings instance to the chart. In .NET MAUI, the SelectionSettings property of SfSunburstChart accepts the SunburstSelectionSettings class. The SelectionType property in Xamarin is renamed to Type, and the SelectionMode property is renamed to DisplayMode. For the full list of selection APIs, refer to the Selection topic.

Xamarin .NET MAUI
SelectionType Type
SelectionMode DisplayMode
SelectionBrush Fill
StrokeColor Stroke / StrokeWidth
Opacity Opacity

The following code example shows how to enable selection in the sunburst chart:

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

    <sunburst:SfSunburstChart.SelectionSettings>
        <sunburst:SunburstSelectionSettings SelectionType="Child"
                                            SelectionMode="HighlightByBrush"
                                            SelectionBrush="DarkRed"/>
    </sunburst:SfSunburstChart.SelectionSettings>
    <!-- code omitted for brevity -->
</ContentPage>
using Syncfusion.SfSunburstChart.XForms;
// code omitted for brevity
SfSunburstChart sunburstChart = new SfSunburstChart();

SunburstSelectionSettings selectionSettings = new SunburstSelectionSettings();
selectionSettings.SelectionType = SunburstSelectionType.Child;
selectionSettings.SelectionMode = SunburstSelectionMode.HighlightByBrush;
selectionSettings.SelectionBrush = Color.DarkRed;
sunburstChart.SelectionSettings = selectionSettings;

this.Content = sunburstChart;
.NET MAUI 
<ContentPage
    xmlns:sunburst="clr-namespace:Syncfusion.Maui.SunburstChart;assembly=Syncfusion.Maui.SunburstChart">

    <sunburst:SfSunburstChart.SelectionSettings>
        <sunburst:SunburstSelectionSettings Type="Child"
                                             DisplayMode="HighlightByBrush"
                                             Fill="DarkRed"/>
    </sunburst:SfSunburstChart.SelectionSettings>
    <!-- code omitted for brevity -->
</ContentPage>
using Syncfusion.Maui.SunburstChart;

SfSunburstChart sunburstChart = new SfSunburstChart();

SunburstSelectionSettings selectionSettings = new SunburstSelectionSettings
{
    Type = SunburstSelectionType.Child,
    DisplayMode = SunburstSelectionDisplayMode.HighlightByBrush,
    Fill = Colors.DarkRed
};
sunburstChart.SelectionSettings = selectionSettings;

this.Content = sunburstChart;

Drill down

Drill down in Xamarin was enabled by setting the EnableDrillDown property. In .NET MAUI, the EnableDrillDown property enables the same feature, and the drill-down toolbar appearance and position can be customized using the ToolbarSettings property of SfSunburstChart. For the full list of drill-down APIs, refer to the Drill Down topic.

Xamarin .NET MAUI
EnableDrillDown EnableDrillDown
ToolbarSettings ToolbarSettings

The following code example shows how to enable drill down in the sunburst chart:

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

    <sunburst:SfSunburstChart EnableDrillDown="True"/>
    <!-- code omitted for brevity -->
</ContentPage>
using Syncfusion.SfSunburstChart.XForms;
// code omitted for brevity
SfSunburstChart sunburstChart = new SfSunburstChart();
sunburstChart.EnableDrillDown = true;
this.Content = sunburstChart;
.NET MAUI 
<ContentPage
    xmlns:sunburst="clr-namespace:Syncfusion.Maui.SunburstChart;assembly=Syncfusion.Maui.SunburstChart">

    <sunburst:SfSunburstChart EnableDrillDown="True">
        <sunburst:SfSunburstChart.ToolbarSettings>
            <sunburst:SunburstToolbarSettings HorizontalAlignment="End"
                                              VerticalAlignment="End"/>
        </sunburst:SfSunburstChart.ToolbarSettings>
        <!-- code omitted for brevity -->
    </sunburst:SfSunburstChart>

</ContentPage>
using Syncfusion.Maui.SunburstChart;

SfSunburstChart sunburstChart = new SfSunburstChart();
sunburstChart.EnableDrillDown = true;
sunburstChart.ToolbarSettings = new SunburstToolbarSettings
{
    HorizontalAlignment = SunburstToolbarAlignment.End,
    VerticalAlignment = SunburstToolbarAlignment.End
};
// code omitted for brevity
this.Content = sunburstChart;

Upcoming features in .NET MAUI Sunburst Chart

The following Xamarin features are not yet supported in the .NET MAUI SfSunburstChart:

  • Legend item customization (LabelStyle, IconType, ItemMargin, IconHeight, ItemWidth).

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. If you do not see what you need, please request it in our feedback portal.