Chart of the Week: Creating a .NET MAUI Sunburst Chart to Visualize the Most Popular Wikipedia Articles
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](syncfusion.com/maui-controls/maui-sunburst-.. ".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.
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](wikimediafoundation.org/news/2023/12/05/ann.. "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.
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.
public class WikipediaData { public ObservableCollection Data { get; set; }
public WikipediaData() { Data = new ObservableCollection { 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](help.syncfusion.com/maui/sunburstchart/gett.. "Getting Started with .NET MAUI Sunburst Chart").
Refer to the following code example.
Step 4: Bind the Wikipedia data to the .NET MAUI Sunburst Chart
Next, we’ll bind the collected Wikipedia data to the [Sunburst Chart](help.syncfusion.com/cr/maui/Syncfusion.Maui.. "SfSunburstChart Class").
Here, we’ve bound the Data to the Sunburst chart’s [ItemsSource](help.syncfusion.com/cr/maui/Syncfusion.Maui.. "ItemsSource Property of .NET MAUI Sunburst Chart") property from its BindingContext.
Then, added the [SunburstHierarchicalLevel](help.syncfusion.com/cr/maui/Syncfusion.Maui.. "SunburstHierarchicalLevel Class") to the [Levels](help.syncfusion.com/cr/maui/Syncfusion.Maui.. "Levels property of .NET MAUI Sunburst Chart") collection. Each hierarchy level is formed based on the properties specified in the [GroupMemberPath](help.syncfusion.com/cr/maui/Syncfusion.Maui.. "GroupMemberPath property of .NET MAUI Sunburst Chart") property, which includes Category and Article. The [ValueMemberPath](help.syncfusion.com/cr/maui/Syncfusion.Maui.. "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](help.syncfusion.com/maui/sunburstchart/sunb.. "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.
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
C#
public class WikipediaData { public ObservableCollection CustomBrush { get; set; }
public WikipediaData() { CustomBrush = new ObservableCollection() { 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.
Enabling the data labels
We can make the data easier to read by enabling [chart data labels](help.syncfusion.com/maui/sunburstchart/data.. "Data labels in .NET MAUI Sunburst Chart").
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.
Integrating center view
The SunburstChart’s [CenterView](help.syncfusion.com/cr/maui/Syncfusion.Maui.. "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.
After executing the previous code examples, the Sunburst Chart will look like the following image.
Visualizing the most popular Wikipedia articles of 2023 using the Syncfusion .NET MAUI Sunburst Chart
GitHub reference
Also, refer to Creating a .NET MAUI Sunburst Chart to Visualize the Most Popular Wikipedia Articles in the 2023 GitHub demo.
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](syncfusion.com/maui-controls/maui-sunburst-.. ".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](syncfusion.com/account "Essential Studio License and Downloads page") page. If you are new, consider trying our 30-day [free trial](syncfusion.com/downloads "Free evaluation of the Essential Studio products") to explore our incredible features.
You can also contact us via our [support forum](syncfusion.com/forums "Syncfusion Support Forum"), [support portal](support.syncfusion.com "Syncfusion Support Portal"), or [feedback portal](syncfusion.com/feedback "Syncfusion Feedback Portal"). We are always happy to help you!
Related blogs
- [Introducing the New .NET MAUI Polar Charts Control](syncfusion.com/blogs/post/dotnet-maui-polar.. "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](syncfusion.com/blogs/post/dotnet-maui-paret.. "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](syncfusion.com/blogs/post/elegantly-visuali.. "Blog: Elegantly Visualize Data with Interactive Features in .NET MAUI Charts")
- [Simplify Data Visualization with Multi-Axis Charts in .NET MAUI](syncfusion.com/blogs/post/simplify-data-vis.. "Blog: Simplify Data Visualization with Multi-Axis Charts in .NET MAUI")