See Who Rules Cricket: ICC Trophy Wins in a Powerful .NET MAUI Treemap Chart

Welcome to the Chart of the Week blog series!

Looking to present cricket stats in a sleek, interactive way?
Whether you’re building a fan-focused mobile app or a professional sports analytics dashboard, users expect clear, engaging visuals that highlight team performance and dominance.

In this blog post, we’ll show you how to use Syncfusion^® .NET MAUI Treemap control to visualize ICC trophy wins by cricketing nations. From binding hierarchical data to customizing chart appearance and adding interactive elements, you’ll learn how to build a compact, intuitive visualization that brings cricket history to life.

What is a Treemap Chart?

A Treemap Chart is a space-efficient visualization that displays data as nested rectangles. Each rectangle’s size is proportional to a specific value, in this case, the number of ICC titles won. Treemaps are especially useful for comparing parts of a whole and quickly spotting patterns or outliers.

Why use a Treemap for cricket data?

• Hierarchical data representation: Treemaps effectively display data with parent-child relationships using nested rectangles.
• Space efficiency: They utilize available space optimally, making them ideal for large datasets.
• Easy comparison: The size of each block allows for quick visual comparison between categories.
• Highlighting dominance: Treemaps clearly show which categories or items are most significant.
• Color-coded insights: Colors provide an additional layer of information, such as performance or trends.

Use cases of Treemap Charts in sports

• Cricket analytics dashboards: Showcase the historical performance of teams in ICC tournaments.
• Fan engagement apps: Allow users to visually explore their favorite team’s achievements.
• Sports education tools: Help learners understand cricket history through interactive visuals.
• Media and journalism: Embed charts in articles or reports to support data-driven storytelling.

The image below illustrates the Treemap chart we aim to create.

Let’s dive in!

Step 1: Collect the data

To begin our visualization journey, we need to gather the data that will power our Treemap chart. In this case, we’re focusing on the number of ICC trophies won by each cricketing nation. This includes victories in the ICC Cricket World Cup, T20 World Cup, Champions Trophy, and World Test Championship (WTC) by men’s teams.

We sourced this data from the official records listed on CricSchedule’s ICC Trophy Winners List, which provides a comprehensive breakdown of international cricket achievements.

Step 2: Define the WorldCupStats Model Class

We’ll define a simple data model to represent each country’s ICC trophy performance. This model will be used to bind data to the Treemap chart in your .NET MAUI application.

public class WorldCupStats
{
    public string? Country { get; set; }
    public int TotalTitles { get; set; }
    public string? Category { get; set; }
    public int Titles { get; set; }
}
 

Step 3: Define the ViewModel Class

With our data model in place, the next step is to create a ViewModel class that manages the cricket data and supports dynamic updates to the UI. This class will expose an observable collection of WorldCupStats objects, which the Treemap chart will bind to.

public partial class ViewModel : INotifyPropertyChanged
{
    private ObservableCollection<WorldCupStats>? _countryTitles;
    public ObservableCollection<WorldCupStats>? CountryTitles
    {
        get => _countryTitles;
        set
        {
            if (_countryTitles != value)
            {
                 _countryTitles = value;
                 OnPropertyChanged(nameof(CountryTitles));
            }
         }
}

private string? _selectedCountry;
public string? SelectedCountry
{
    get => _selectedCountry;
    set
    {
        if (_selectedCountry != value)
        {
            _selectedCountry = value;
            OnPropertyChanged(nameof(SelectedCountry));
        }
     }
}

private int? _selectedCountryTotalTitles;
public int? SelectedCountryTotalTitles
{
    get => _selectedCountryTotalTitles;
    set
    {
        if (_selectedCountryTotalTitles != value)
        {
            _selectedCountryTotalTitles = value;
            OnPropertyChanged(nameof(SelectedCountryTotalTitles));
        }
    }
}

private ObservableCollection<WorldCupStats>? _selectedCountryDetails;
public ObservableCollection<WorldCupStats>? SelectedCountryDetails
{
    get => _selectedCountryDetails;
    set
    {
        if (_selectedCountryDetails != value)
        {
           _selectedCountryDetails = value;
           OnPropertyChanged(nameof(SelectedCountryDetails));
        }
     }
}

/// <summary>
/// Initializes a new instance of the ViewModel class and loads initial data.
/// </summary>
public ViewModel()
{
    CountryTitles = LoadCountryTitles();
}

private static ObservableCollection<WorldCupStats> LoadCountryTitles()
{
    return
    [
        new WorldCupStats { Country = "Australia", TotalTitles = 10 },
        new WorldCupStats { Country = "India", TotalTitles = 7 },
        new WorldCupStats { Country = "West Indies", TotalTitles = 5 },
        new WorldCupStats { Country = "Pakistan", TotalTitles = 3 },
        new WorldCupStats { Country = "England", TotalTitles = 3 },
        new WorldCupStats { Country = "Sri Lanka", TotalTitles = 3 },
        new WorldCupStats { Country = "New Zealand", TotalTitles = 2 },
        new WorldCupStats { Country = "South Africa", TotalTitles = 2 },
    ];
}

    public event PropertyChangedEventHandler? PropertyChanged;

    protected void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}    
 

Step 4: Define the layout

Let’s create a structured layout to organize the UI elements:

• Use a Border element with rounded corners to frame the content.
• Inside the Border, define a Grid with two rows: one for the chart title and the other for the Treemap chart itself.

This structured approach ensures a clean and visually appealing layout.

<!-- Border around entire content -->
<Border Margin="10,18,10,10"         
        Padding="5"        
        Stroke="Black"       
        StrokeThickness="2"         
        StrokeShape="RoundRectangle 10">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/> 
            // Title Section
            <RowDefinition Height="*"/>
            // TreeMap Section 
        </Grid.RowDefinitions>
    </Grid>
</Border> 

Step 5: Configure the Syncfusion^® .NET MAUI Treemap Chart

To visualize the ICC World Cup champions data, we’ll use the Syncfusion^® .NET MAUI Treemap control. This powerful charting component allows us to represent hierarchical or proportional data using nested rectangles, where each rectangle’s size corresponds to the number of titles won by a country.

For more details, refer to the official Syncfusion^® .NET MAUI Treemap documentation.

<treemap:SfTreeMap x:Name="treeMapChart" 
                   Grid.Row="1"
                   DataSource="{Binding CountryTitles}"
                   RangeColorValuePath="TotalTitles"
                   PrimaryValuePath="TotalTitles">
</treemap:SfTreeMap>

Step 6: Customize the .NET MAUI Treemap Chart appearance

To enhance readability and improve data visualization, we’ll customize the following chart elements in the Syncfusion .NET MAUI Treemap:

• Leaf item labels: Display country names clearly using bold, white text for better contrast.
• Spacing: Add space between rectangles to improve visual separation.
• Color palette: Assign distinct colors to each country using a custom brush palette, making it easier to differentiate between them.
• Tooltips: Design a custom tooltip template to show detailed information, such as country name and total titles.
• Selection behavior: Enable single-item selection and handle selection changes to support interactivity.

These enhancements make the Treemap more intuitive and visually appealing, especially on mobile devices where space is limited.

<!-- TreeMap Section -->
<treemap:SfTreeMap x:Name="treeMapChart"
                   DataSource="{Binding CountryTitles}"
                   Grid.Row="1"
                   Margin="8"
                   RangeColorValuePath="TotalTitles"
                   PrimaryValuePath="TotalTitles"
                   ShowToolTip="True">

    <!-- Leaf Item Settings -->
    <treemap:SfTreeMap.LeafItemSettings>
        <treemap:TreeMapLeafItemSettings 
                 LabelPath="Country" 
                 Spacing="3">
            <treemap:TreeMapLeafItemSettings.TextStyle>
                <treemap:TreeMapTextStyle 
                         TextColor="White" 
                         FontSize="18"    
                         FontAttributes="Bold"/>
            </treemap:TreeMapLeafItemSettings.TextStyle>
        </treemap:TreeMapLeafItemSettings>
    </treemap:SfTreeMap.LeafItemSettings>

    <!-- Tooltip Template -->
    <treemap:SfTreeMap.ToolTipTemplate>
        <DataTemplate>
            <StackLayout Orientation="Horizontal">
                <Rectangle HeightRequest="30"                                               
                              WidthRequest="8                         
                              Fill="{Binding Background}"/>
                <StackLayout Orientation="Vertical">
                     <Label Text="{Binding PrimaryValueText}"  
                               FontSize="12.5"
                               Padding="5,0,0,0" 
                               FontAttributes="Bold"                           
                               TextColor="White"/>
                     <Label Text="{Binding Item.TotalTitles, 
                               StringFormat='Titles : {0}'}" 
                               FontSize="12" 
                               Padding="5,0,0,0" 
                               Margin="0,2,0,0" 
                               TextColor="White"/>
                </StackLayout>
             </StackLayout>
         </DataTemplate>
    </treemap:SfTreeMap.ToolTipTemplate>
</treemap:SfTreeMap> 

Adding the chart title

Providing context to the visualization helps users understand the insights presented in the Treemap Chart by clearly summarizing its purpose. Use a horizontal stack layout that includes the logo and title labels to explain the chart’s intent.

<!-- Title Section -->
<HorizontalStackLayout Grid.Row="0">
    <Image Source="cup.png" WidthRequest="50" HeightRequest="60" VerticalOptions="Center" HorizontalOptions="Center"/>
    <Label Text="ICC Men's World Cup Winners 1975 - 2025"
           VerticalTextAlignment="Center"
           HorizontalTextAlignment="Center"
           FontSize="{OnPlatform Default=25, Android=18, iOS=18}"
           Padding="3"
           FontAttributes="Bold"/>
</HorizontalStackLayout> 

This section improves clarity by summarizing the purpose of the visualization.

Step 7: Add interactivity – Render a Circular Chart upon country selection

To make the Treemap chart more interactive and insightful, we’ll implement a feature where selecting a country dynamically renders a doughnut chart that breaks down the types of ICC trophies won by that country’s men’s team.

Refer to the following XAML code example.

<!-- TreeMap Section -->
<treemap:SfTreeMap x:Name="treeMapChart"
                   SelectionMode="Single"
                   SelectionChanged="TreeMapChart_SelectionChanged">
</treemap:SfTreeMap>
 

Refer to the following C# code example.

private void TreeMapChart_SelectionChanged(object sender, TreeMapSelectionChangedEventArgs  e)
{
    if (sender is SfTreeMap treeMap)
    {
         // Retrieve the selected item's country name
         string? selectedCountry = treeMap.SelectedItems.FirstOrDefault()?.PrimaryValueText;

         if (selectedCountry != null)
         {
             // Update data based on the selected country
             UpdateDataBasedOnSelection(selectedCountry);
             _viewModel.SelectedCountry = selectedCountry;

             // Navigate to TitleBreakDownPage with updated data
             Navigation.PushAsync(new TitleBreakDownPage(_viewModel));
         }
     }
 } 

Step 8: Configure the .NET MAUI Doughnut Chart

To visualize the breakdown of ICC trophies by type (e.g., World Cup, T20 World Cup, Champions Trophy), we’ll use the Syncfusion^® .NET MAUI Doughnut Chart. This chart is ideal for displaying proportional data in a visually engaging and compact format.

We’ll configure the chart using the official Syncfusion^® Doughnut Chart documentation.

<!-- Doughnut Chart -->
<chart:SfCircularChart>

    <!-- Adding Legend -->
    <chart:SfCircularChart.Legend>
        <chart:ChartLegend Placement="Top"/>
    </chart:SfCircularChart.Legend>

    <!-- Doughnut Series Customization -->
    <chart:DoughnutSeries  x:Name="series" 
                           ItemsSource="{Binding SelectedCountryDetails}"
                           XBindingPath="Category" 
                           YBindingPath="Titles">
    </chart:DoughnutSeries>
</chart:SfCircularChart>

Step 9: Customize the .NET MAUI Doughnut Chart

To enhance the clarity and visual appeal of the chart, we’ll customize the Syncfusion^® .NET MAUI Doughnut Chart, which displays the breakdown of ICC trophies by type (e.g., World Cup, T20 World Cup, Champions Trophy).

Customize Chart Series

We’ll apply the following customizations to improve the chart’s readability and aesthetics:

• Innerradius: Creates the doughnut effect by defining the size of the center hole.
• Showdatalabels: Displays the number of titles directly on each segment.
• Datalabelsettings: Controls the position, alignment, and connector lines of the labels.
• Palettebrushes: Applies custom colors to each segment for better distinction and branding.
• Startangle: Sets the starting position of the first segment in the chart.
• Endangle: Defines how far the chart sweeps from the start angle, allowing partial or full circles.
• Radius: Sets the overall size of each doughnut segment relative to the chart area.
• Stroke: Defines the border color of each segment, enhancing visual separation.
• Strokewidth: Specifies the thickness of the border around each segment for added emphasis.

 
<!-- Doughnut Chart -->
<chart:SfCircularChart Grid.Row="1" VerticalOptions="Fill">

     <!-- Doughnut Series Customization -->
     <chart:DoughnutSeries x:Name="series" 
                           Stroke="White" 
                           StrokeWidth="4"
                           InnerRadius="0.6"
                           Radius="0.6"
                           StartAngle="-90"
                           EndAngle="270"
                           ShowDataLabels="True"
     </chart:DoughnutSeries>
</chart:SfCircularChart> 

Adding an image into the center view

The CenterView in the Doughnut Chart allows us to convey additional information about the chart. In this example, we’ve included an image related to the content in the center view of our Doughnut Chart. The images were sourced from Metro Studio.

<chart:DoughnutSeries.CenterView>
    <StackLayout x:Name="layout"        
                    HeightRequest="{Binding CenterHoleSize}"        
                    WidthRequest="{Binding CenterHoleSize}">
        <Path x:Name="pathData"             
                 Scale="1.5"            
                 Fill="Black"            
                 HorizontalOptions="Center"
                 VerticalOptions="EndAndExpand"/>
        <Label FontSize="15"          
                  Margin="0,10,0,0" 
                  Padding="2" 
                  x:Name="label"
                  TextColor="Black"
                  HorizontalOptions="Center"             
                  VerticalOptions="StartAndExpand"/>
    </StackLayout>
</chart:DoughnutSeries.CenterView>

After executing the previous code examples, the output will look like the following image.

Adding the title for Trophy Breakdown Doughnut chart

Providing context to the visualization helps users understand the insights presented in the Doughnut Chart by clearly summarizing its purpose.

<Grid RowDefinitions="Auto, *">
    <!-- Title -->
    <Label Text="{Binding SelectedCountry, StringFormat='{}{0} - ICC Trophy Breakdown'}" 
              HorizontalTextAlignment="Center" 
              VerticalTextAlignment="Center" 
              VerticalOptions="Center" 
              HorizontalOptions="Center"
              FontSize="{OnPlatform Default=25, Android=18, iOS=18}"
              Padding="3"           
              Margin="0,10"           
              FontAttributes="Bold"/>

    <!-- Doughnut Chart -->
    <chart:SfCircularChart Grid.Row="1" VerticalOptions="Fill">
    --------
    --------
    --------
    </chart:SfCircularChart>
</Grid>

Refer to the image below to view the final output of the Syncfusion .NET MAUI Treemap Chart. 

GitHub reference

For more details, refer to Github demo.

Supercharge your cross-platform apps with Syncfusion's robust .NET MAUI controls.

Try It Free

FAQs

Check out the Syncfusion Toolkit for .NET MAUI.

Conclusion

Thanks for following along! By combining the power of Syncfusion^® .NET MAUI Treemap control and Doughnut Charts, you’ve now got a visually rich and interactive way to showcase ICC trophy wins by cricket teams.

Whether you’re building a fan-focused mobile app, a sports analytics dashboard, or an educational tool, this approach helps users explore cricket history in a compact, intuitive format that’s both informative and delightful to use.

We strongly encourage you to follow the steps outlined and experiment with chart customization and interactivity to create your own engaging cricket analytics dashboards. Don’t forget to share your feedback or questions in the comments section below!

The existing customers can download the new version of Essential Studio on the license and downloads page.  If you are not a Syncfusion^® customer, try our 30-day free trial to check out our incredible features. 

Got questions or ideas? Drop them in the comments or contact us through our support forum, support portal, or feedback portal. We are always happy to assist you!

Related Blogs

From Chat to Charts: Build an AI-Powered .NET MAUI Chatbot That Converts Text into Charts

9 min read

Create Professional Layered Column Charts for Accommodation Trends Using .NET MAUI

8 min read

How to Build Variance Indicators Using .NET MAUI Toolkit Charts for Natural Gas Price Volatility

12 min read

Build a Stunning and Interactive Real-Time Weather Dashboard with .NET MAUI Toolkit

12 min read