Migrate from Xamarin.Forms SfSunburstChart to .NET MAUI SfSunburstChart

19 Dec 202312 minutes to read

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

Namespaces

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

To make the migration easier, the most of the APIs from the Xamarin SfSunburstChart were kept in the .NET MAUI SfSunburstChart. Currently, most of the features have been added in the SfSunburstChart, 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.

Initialize 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;
...

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;
. . .
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 Xamarin SfSunburstChart to the .NET MAUI SfSunburstChart.

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

    <sunburst:SfSunburstChart/>

</ContentPage>
using Syncfusion.SfSunburstChart.XForms;
...

SfSunburstChart sunburstChart = new SfSunburstChart(); 
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 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>
    . . .
</ContentPage>
using Syncfusion.SfSunburstChart.XForms;
...
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="Top" IsVisible="True" />
    </sunburst:SfSunburstChart.Legend>

</ContentPage>
using Syncfusion.Maui.SunburstChart;

SfSunburstChart sunburstChart = new SfSunburstChart();

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

this.Content = sunburstChart;

Data Label

To enable data labels, use the ShowLabel property in the SunburstChartDataLabel class and the ShowLabels property in the SfSunburstChart class, in Xamarin and MAUI respectively.
To customize the data label appearance, create an instance of the SunburstDataLabelSettings class and add it to the DataLabelSettings of SfSunburstChart. The following code explains 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;
...
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;

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 and the EnableTooltip property in the SfSunburstChart class, in Xamarin and MAUI respectively.
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"
                BackgroundColor="Green"  BorderColor="Black" BorderWidth="1" 
                Duration="2000" >
        </sunburst:SunburstTooltipSettings>
    </sunburst:SfSunburstChart.TooltipSettings>

</ContentPage>
using Syncfusion.SfSunburstChart.XForms;
...
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="4"
                Background="Gray" />
        </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;

sunburstChart.EnableTooltip = true;
sunburstChart.TooltipSettings = new SunburstTooltipSettings()
{
    Background = Brush.Gray,
    TextColor = Colors.Black,
    Duration = 4,
    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;

Upcoming features in .NET MAUI Sunburst chart

  • Drill down to explore each level of the hierarchy in detail.
  • Selection allows you to highlight or choose segments within the hierarchy.
  • Support to customize legend items.

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.