How to Add a View to the Center of the .NET MAUI Sunburst Chart?

In this article, we’ll learn how to add a view to the center of the .NET MAUI Sunburst Chart. The step-by-step instructions and relevant code examples will help you customize the center view, ensuring it fits perfectly within the Sunburst Chart’s center hole without overlapping the chart segments.

Step 1: Initialize the SfSunburstChart with its ItemsSource bound to the data from the ViewModel, and define the hierarchical levels.

XAML

<chart:SfSunburstChart ItemsSource="{Binding AnimalData}" 
                       ValueMemberPath="PopulationPercentage">

   <chart:SfSunburstChart.BindingContext>
       <local:ViewModel/>
   </chart:SfSunburstChart.BindingContext>

       <chart:SfSunburstChart.Levels>
       <chart:SunburstHierarchicalLevel GroupMemberPath="Category" />
       <chart:SunburstHierarchicalLevel GroupMemberPath="Species" />
   </chart:SfSunburstChart.Levels>

</chart:SfSunburstChart> 

C#

SfSunburstChart sunburst = new SfSunburstChart();

this.BindingContext = new ViewModel();

sunburst.ItemsSource = (new ViewModel()).AnimalData;
sunburst.ValueMemberPath = "PopulationPercentage";

sunburst.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "Category" });
sunburst.Levels.Add(new SunburstHierarchicalLevel() { GroupMemberPath = "Species" });

this.Content = sunburst; 

Step 2: To enhance your sunburst chart, use the CenterView property to add any views like images, text, shapes, and more to the center of the chart to provide additional information. The binding context of the CenterView will be the SfSunburstChart class.

XAML

<chart:SfSunburstChart>
. . .
   <chart:SfSunburstChart.CenterView>
       <Image Source="image.png" />
   </chart:SfSunburstChart.CenterView>
. . .
</chart:SfSunburstChart> 

C#

var centerImage = new Image
{
   Source = "image.png"
};

// Set the CenterView property
sunburstChart.CenterView = centerImage;

Step 3: Utilize the CenterHoleSize property of the sunburst chart to get the diameter value of the center hole and use it to protect the view in the sunburst chart center from overlapping with the segments. Bind the HeightRequest and WidthRequest of the center view elements to this property to make sure they fit within the center.

XAML

<chart:SfSunburstChart.CenterView>
   <Image Source="image.png" 
          HeightRequest="{Binding CenterHoleSize}" 
          WidthRequest="{Binding CenterHoleSize}"/>
</chart:SfSunburstChart.CenterView> 

C#

var centerImage = new Image();
centerImage.SetBinding(HeightRequestProperty, "CenterHoleSize");
centerImage.SetBinding(WidthRequestProperty, "CenterHoleSize");
centerImage.Source = "image.png";

sunburstChart.CenterView = centerImage; 

Step 4: Run the application, and the sunburst chart will be displayed with the image added to its center view.

Output:

Conclusion:

I hope you enjoyed learning how to add a view to the center of the .NET MAUI Sunburst Chart.

You can refer to our .NET MAUI Sunburst Chart feature tour page to know about its other groundbreaking feature representations. Explore our .NET MAUI Sunburst Chart documentation to understand how to present and manipulate data.

For current customers, you can check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Chart and other .NET MAUI components.

Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!