Chart of the Week: Creating a .NET MAUI Sunburst Chart to Visualize the Most Popular Wikipedia Articles
Tags: dotnetmaui, chart, mobile, syncfusion
Published: 2024-04-26 10:15:18

---
title: Chart of the Week: Creating a .NET MAUI Sunburst Chart to Visualize the Most Popular Wikipedia Articles
published: true
date: 2024-04-24 12:47:35 UTC
tags: dotnetmaui, chart, mobile, syncfusion
canonical_url: https://www.syncfusion.com/blogs/post/dotnet-maui-sunburst-chart-wikipedia
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h9whbr9pgblb1ldw139o.png
---
**TL;DR:** Let’s visualize the most popular Wikipedia articles of 2023 using Syncfusion .NET MAUI Sunburst Chart. Learn to gather, bind, and visualize data effectively while customizing chart elements to represent data trends.

Welcome to the  **Chart of the Week**  blog series! Today, we’ll visualize the data on the most-viewed Wikipedia articles of 2023 using the Syncfusion .NET MAUI Sunburst Chart.

People worldwide have numerous questions, and when seeking answers, they often turn to Wikipedia, the giant encyclopedia in the world, for enlightenment.

The most-viewed Wikipedia articles offer an intriguing insight into the collective curiosity of people globally. From exploring current events to delving into timeless topics, these articles reflect society’s ongoing quest for knowledge.

Whether unraveling the complexities of global politics, understanding scientific advancements, or uncovering cultural trends, these articles reveal a society keen to comprehend the constantly evolving dynamics of our world.

Syncfusion [.NET MAUI Sunburst Chart](https://www.syncfusion.com/maui-controls/maui-sunburst-charts ".NET MAUI Sunburst Chart"), a radial treemap, is a component that visualizes hierarchical data using a concentric circle layout. The innermost circle represents the root level of the hierarchy. The control’s rich feature set includes functionalities like data binding, data labels, legends, tooltips, animations, and a center view.

The chart that we plan to create is shown in the picture below.

 ![Visualizing the most popular Wikipedia articles of 2023 using the Syncfusion .NET MAUI Sunburst Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2024/04/Visualizing-the-most-popular-Wikipedia-articles-of-2023-using-the-Syncfusion-.NET-MAUI-Sunburst-Chart-1.png)

Let’s visualize the data on the most-viewed Wikipedia articles in 2023 using the Syncfusion .NET MAUI Sunburst Chart.

## Step 1: Gather the data

First, let’s collect data on the most viewed Wikipedia articles in 2023 from the [Wikimedia Foundation](https://wikimediafoundation.org/news/2023/12/05/announcing-wikipedias-most-popular-articles-of-2023/ "Announcing Wikipedia’s most popular articles of 2023").

## Step 2: Populate the data for the chart

Now, define the **WikipediaModel** class with the following properties:

- **Category** – Represents the types of article genres for the most visited Wikipedia pages in 2023.
- **Value** – Indicates the number of visits for each article.
- **Article** – Represents the name of the article published in the year 2023.

```csharp
public class WikipediaModel
{
    public string Category { get; set; }
    public double Value { get; set; }
    public string Article { get; set; }

   public WikipediaModel(string category, double value, string article)
    {
        Category = category;
        Value = value;
        Article = article;
    }
}
```

Now, generate the data collection that illustrates the most popular articles in 2023 using the **WikipediaData** class with the **Data** property.

Refer to the following code example.

```csharp
public class WikipediaData
{
    public ObservableCollection<WikipediaModel> Data { get; set; }

    public WikipediaData()
    {
        Data = new ObservableCollection<WikipediaModel>
        {
            new WikipediaModel("Celebrities",22179656, "Taylor Swift"),
            new WikipediaModel("Celebrities",17882508, "Matthew Perry"),
            new WikipediaModel("Celebrities",16026256, "Elon Musk"),
            new WikipediaModel("Celebrities",14812928, "Lisa Marie Presley"),

            new WikipediaModel("Film and Television",31265503, "Oppenheimer (film)"),
            new WikipediaModel("Film and Television",28681943, "J. Robert Oppenheimer"),
            new WikipediaModel("Film and Television",23112884, "Jawan (film)"),
            new WikipediaModel("Film and Television",20614066, "Pathaan (film)"),
            new WikipediaModel("Film and Television",19930916, "Barbie (film)"),
            new WikipediaModel("Film and Television",16988676, "Animal (2023 film)"),
            new WikipediaModel("Film and Television",15062733, "Avatar: The Way of Water"),
            new WikipediaModel("Film and Television",14170970, "Guardians of the Galaxy Vol. 3"),
            new WikipediaModel("Film and Television",13994461, "Leo (2023 Indian film)"),

            new WikipediaModel("Sports",38723498, "2023 Cricket World Cup"),
            new WikipediaModel("Sports",32456338, "Indian Premier League"),
            new WikipediaModel("Sports",26390217, "Cricket World Cup"),
            new WikipediaModel("Sports",20813029, "2023 Indian Premier League"),
            new WikipediaModel("Sports",19968486, "Premier League"),
            new WikipediaModel("Sports",19287757, "Cristiano Ronaldo"),
            new WikipediaModel("Sports",17768818, "Lionel Messi"),

            new WikipediaModel("Others",52565681, "ChatGPT"),
            new WikipediaModel("Others",48549304, "Deaths in 2023"),
            new WikipediaModel("Others",21000722, "The Last of Us (TV series)"),
            new WikipediaModel("Others",18135421, "United States"),
            new WikipediaModel("Others",15200006, "India"),
        };
    }
}
```

## Step 3: Configure the Syncfusion .NET MAUI Sunburst Chart

Let’s configure the Syncfusion .NET MAUI Sunburst Chart control by following the steps outlined in this [documentation](https://help.syncfusion.com/maui/sunburstchart/getting-started "Getting Started with .NET MAUI Sunburst Chart"). 

Refer to the following code example.

```xml
<chart:SfSunburstChart>
</chart:SfSunburstChart>
```

## Step 4: Bind the Wikipedia data to the .NET MAUI Sunburst Chart

Next, we’ll bind the collected Wikipedia data to the [Sunburst Chart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.SunburstChart.SfSunburstChart.html "SfSunburstChart Class").

```xml
<chart:SfSunburstChart ItemsSource="{Binding Data}" ValueMemberPath="Value">

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

Here, we’ve bound the  **Data** to the Sunburst chart’s [ItemsSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.SunburstChart.SfSunburstChart.html#Syncfusion_Maui_SunburstChart_SfSunburstChart_ItemsSource "ItemsSource Property of .NET MAUI Sunburst Chart") property from its **BindingContext**.

Then, added the [SunburstHierarchicalLevel](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.SunburstChart.SunburstHierarchicalLevel.html "SunburstHierarchicalLevel Class") to the [Levels](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.SunburstChart.SfSunburstChart.html#Syncfusion_Maui_SunburstChart_SfSunburstChart_Levels "Levels property of .NET MAUI Sunburst Chart") collection. Each hierarchy level is formed based on the properties specified in the [GroupMemberPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.SunburstChart.SunburstHierarchicalLevel.html#Syncfusion_Maui_SunburstChart_SunburstHierarchicalLevel_GroupMemberPath "GroupMemberPath property of .NET MAUI Sunburst Chart") property, which includes **Category** and **Article.**   The [ValueMemberPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.SunburstChart.SfSunburstChart.html#Syncfusion_Maui_SunburstChart_SfSunburstChart_ValueMemberPath "ValueMemberPath property of .NET MAUI Sunburst Chart") property is used to calculate the size of each arc segment.

## Step 5: Customize  the chart’s appearance

Let’s customize the [appearance](https://help.syncfusion.com/maui/sunburstchart/sunburst-chart "Appearance customization in .NET MAUI Sunburst Chart") of the .NET MAUI Sunburst Chart for better visualization. 

### Adding the chart title

Incorporating a title into the chart enhances the clarity of the presented data. Refer to the following code example to add a chart title with an image.

```xml
<chart:SfSunburstChart.Title>
 <Grid>
  <Grid.RowDefinitions>
   <RowDefinition Height="Auto"/>
   <RowDefinition Height="Auto"/>
  </Grid.RowDefinitions>

  <Grid.ColumnDefinitions>
   <ColumnDefinition Width="50"/>
   <ColumnDefinition Width="*"/>
  </Grid.ColumnDefinitions>

  <Image Grid.Column="0" Grid.RowSpan="2" Source="wikipedia.png" Margin="0,-25,0,20" HeightRequest="100" WidthRequest="{OnPlatform Android=40,iOS=40, Default=50}"/>
  <StackLayout Grid.Column="1" Grid.Row="0" Margin="5,0,0,0">
   <Label Text="The Most Popular Wikipedia Articles in 2023" FontSize="{OnPlatform Android=20, iOS=20 ,Default=25}" FontAttributes="Bold" TextColor="#666666"/>
   <Label Text="Wikipedia English-language articles with the most visits in 2023(in millions)" FontSize="{OnPlatform Android=14,iOS=14, Default=17}" TextColor="Gray" Margin="0,2,0,0"/>
  </StackLayout>
 </Grid>
</chart:SfSunburstChart.Title>
```

### Customizing the chart color and size

Here, we are going to enhance the chart’s appearance by adjusting its size, inner radius, and color scheme. This is achieved through the **Radius**, **InnerRadius,** and **PaletteBrushes** properties.

**XAML**

```xml
<chart:SfSunburstChart PaletteBrushes="{Binding CustomBrush}" Radius="1" InnerRadius="{OnPlatform MacCatalyst=0.21, Default=0.37}">

</chart:SfSunburstChart>
```

**C#**

```csharp
public class WikipediaData
{
    public ObservableCollection<Brush> CustomBrush { get; set; }

    public WikipediaData()
    {
        CustomBrush = new ObservableCollection<Brush>()
        {
             new SolidColorBrush(Color.FromArgb("#D4FF4E4E")),
             new SolidColorBrush(Color.FromArgb("#D408CDAA")),
             new SolidColorBrush(Color.FromArgb("#D49656FF")),
             new SolidColorBrush(Color.FromArgb("#D41089E9")),
        };
    }
}
```

### Adding chart legend

Refer to the following code example to enable and position the chart legend.

```xml
<chart:SfSunburstChart>

 <chart:SfSunburstChart.Legend>
  <chart:SunburstLegend Placement="Right"/>
 </chart:SfSunburstChart.Legend>        

</chart:SfSunburstChart>
```

### Enabling the data labels

We can make the data easier to read by enabling [chart data labels](https://help.syncfusion.com/maui/sunburstchart/datalabels "Data labels in .NET MAUI Sunburst Chart").

```xml
<chart:SfSunburstChart ShowLabels="True">
</chart:SfSunburstChart>
```

### Adding an interactive tooltip

We can enhance the interactivity of our .NET MAUI Sunburst Chart by adding tooltips. Tooltips provide additional information or metadata when a segment is tapped or hovered over. We can also customize the appearance of the tooltip using the  **TooltipTemplate**  property.

```xml
<chart:SfSunburstChart EnableTooltip="True">
            
 <chart:SfSunburstChart.TooltipTemplate>
  <DataTemplate>
   <StackLayout Orientation="Horizontal">
    <Rectangle HeightRequest="30" WidthRequest="8" Fill="{Binding Fill}"/>
    <StackLayout>
     <Label Text="{Binding Item[0]}" FontSize="12.5" Margin="5,0,0,0" FontAttributes="Bold" TextColor="White"/>
     <Label Text="{Binding Item[1], Converter={StaticResource millionsConverter}}" FontSize="11.5" Margin="5,2,0,0" TextColor="White"/>
    </StackLayout>
   </StackLayout>
  </DataTemplate>
 </chart:SfSunburstChart.TooltipTemplate>

</chart:SfSunburstChart>
```

### Integrating center view

The SunburstChart’s [CenterView](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.SunburstChart.SfSunburstChart.html#Syncfusion_Maui_SunburstChart_SfSunburstChart_CenterView "CenterView property of .NET MAUI Sunburst Chart") property allows you to place a custom view at the center of the chart. This center view helps us to convey additional details about the sunburst chart.

Refer to the following code example.

```xml
<chart:SfSunburstChart.CenterView>

 <StackLayout VerticalOptions="Center" HeightRequest="{Binding CenterHoleSize}" WidthRequest="{Binding CenterHoleSize}">
  <Image Source="logo.png" HeightRequest="{OnPlatform Android=45,iOS=45,Default=55}" WidthRequest="{OnPlatform Android=30,iOS=30, Default=45}" Margin="{OnPlatform MacCatalyst='0,46,0,0'}"/>
  <Label LineBreakMode="WordWrap" MaxLines="2" Text="Globe's wisdom core" TextColor="#5d5d5d" FontFamily="AcmeRegular" FontSize="{OnPlatform Android=9.5,iOS=9, Default=14}" HorizontalTextAlignment="Center" Margin="{OnPlatform MacCatalyst='0,6,0,0'}"/>
 </StackLayout>

</chart:SfSunburstChart.CenterView>
```

After executing the previous code examples, the Sunburst Chart will look like the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/04/Visualizing-the-most-popular-Wikipedia-articles-of-2023-using-the-Syncfusion-.NET-MAUI-Sunburst-Chart-min.gif" alt="Visualizing the most popular Wikipedia articles of 2023 using the Syncfusion .NET MAUI Sunburst Chart" style="width:100%">

  <figcaption>Visualizing the most popular Wikipedia articles of 2023 using the Syncfusion .NET MAUI Sunburst Chart</figcaption>

</figure>

## GitHub reference

Also, refer to [Creating a .NET MAUI Sunburst Chart to Visualize the Most Popular Wikipedia Articles in the 2023 GitHub demo.](https://github.com/SyncfusionExamples/Creating-a-.NET-MAUI-Sunburst-Chart-to-Visualize-the-Most-Popular-Wikipedia-Articles-in-2023)

## Conclusion

Thanks for reading! In this blog, we have explored how to visualize the data on the most popular Wikipedia articles in 2023 using the Syncfusion [.NET MAUI Sunburst Chart](https://www.syncfusion.com/maui-controls/maui-sunburst-charts ".NET MAUI Sunburst Chart"). We strongly encourage you to follow the steps outlined in this blog and share your thoughts in the comments below.

The existing customers can download the latest version of Essential Studio from the [License and Downloads](https://www.syncfusion.com/account "Essential Studio License and Downloads page") page. If you are new, consider trying our 30-day [free trial](https://www.syncfusion.com/downloads "Free evaluation of the Essential Studio products") to explore our incredible features. 

You can also contact us via our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback "Syncfusion Feedback Portal"). We are always happy to help you!

## Related blogs

- [Introducing the New .NET MAUI Polar Charts Control](https://www.syncfusion.com/blogs/post/dotnet-maui-polar-charts-control "Blog: Introducing the New .NET MAUI Polar Charts Control")
- [Chart of the Week: Creating a Pareto Chart Using .NET MAUI Charts to Identify Key Customer Complaints](https://www.syncfusion.com/blogs/post/dotnet-maui-pareto-chart-for-customer-complaints "Blog: Chart of the Week: Creating a Pareto Chart Using .NET MAUI Charts to Identify Key Customer Complaints")
- [Elegantly Visualize Data with Interactive Features in .NET MAUI Charts](https://www.syncfusion.com/blogs/post/elegantly-visualize-data-with-interactive-features-in-net-maui-charts "Blog: Elegantly Visualize Data with Interactive Features in .NET MAUI Charts")
- [Simplify Data Visualization with Multi-Axis Charts in .NET MAUI](https://www.syncfusion.com/blogs/post/simplify-data-visualization-with-multi-axis-charts-in-net-maui "Blog: Simplify Data Visualization with Multi-Axis Charts in .NET MAUI")