--- title: "Chart of the Week: Create a .NET MAUI Stacked Column Chart for the Top-Earning Female Athletes" published_at: "2024-01-31T13:56:37+00:00" modified_at: "2026-01-12T12:57:52+00:00" url: "https://www.syncfusion.com/blogs/post/maui-stackedcolumn-chart-athlete" excerpt: "This blog explains how to visualize the top-earning female athletes’ data using the Syncfusion .NET MAUI Stacked Column Chart." taxonomy_category: - ".NET MAUI" - "Chart" - "Chart of the week" - "Desktop" - "Mobile" - "Syncfusion" - "UI" taxonomy_post_tag: - ".NET MAUI" - "Charts" - "desktop" - "MAUI" - "Mobile" --- [Chart of the week](https://www.syncfusion.com/blogs/category/chart-of-the-week) # Chart of the Week: Create a .NET MAUI Stacked Column Chart for the Top-Earning Female Athletes [Dhanaraj Rajendran](https://www.syncfusion.com/blogs/author/dhanaraj-rajendran) ![Chart of the Week Create a .NET MAUI Stacked Column Chart to Visualize the Top-Earning Female Athletes of 2023](https://www.syncfusion.com/blogs/wp-content/uploads/2024/01/Chart-of-the-Week-Create-a-.NET-MAUI-Stacked-Column-Chart-to-Visualize-the-Top-Earning-Female-Athletes-of-2023.png) Welcome to our **Chart of the Week** blog series! In this week’s edition, we are visualizing the highest-paid female athletes in 2023 using the [Syncfusion .NET MAUI stacked column chart](https://help.syncfusion.com/maui/cartesian-charts/stackedcolumn) . In professional sports, female athletes are making significant financial strides both on and off the field. Let’s create some visual proof of that. Refer to the following image.![Visualizing the top-earning female athletes’ data using .NET MAUI stacked column chart](https://www.syncfusion.com/blogs/wp-content/uploads/2024/01/Visualizing-the-top-earning-female-athletes-data-using-.NET-MAUI-stacked-column-chart.png) Let’s get started! ## Step 1: Gathering the data First, let’s gather the data for the [highest-paid female athletes](https://www.forbes.com/sites/brettknight/2023/12/21/the-worlds-highest-paid-female-athletes-2023/?sh=4d6e6f022b4c) in 2023. ## Step 2: Preparing the data for the chart Create the **FemaleAthletesModel** class with ** AthleteName**, ** OnFieldEarning**, ** OffFieldEarning**, and ** Country** properties to store the athletes’ data. ``` public class FemaleAthletesModel { public string AthleteName { get; set; } = string.Empty; public double OnFieldEarning { get; set; } public double OffFieldEarning { get; set; } public string Country { get; set; } = string. Empty; } ``` Next, configure the **TopPaidFemaleAthleteInfo** class to create a collection of athletes’ data along with their earnings on and off the field and store it in an observable collection using the ** AthletesData**property. Then, create a dictionary to store the streams of each athlete’s country flag image using the ** Streams** property. ``` public class TopPaidFemaleAthleteInfo { public ObservableCollection AthletesData { get; set; } public Dictionary Streams { get; } = new Dictionary(); Stream? stream; public TopPaidFemaleAthleteInfo() { AthletesData = new ObservableCollection() { new FemaleAthletesModel() {AthleteName = "Leyla Fernandez", OnFieldEarning = 1.8, OffFieldEarning = 7,Country="canada"}, new FemaleAthletesModel() {AthleteName = "Elena Rybakina", OnFieldEarning = 5.5, OffFieldEarning = 4,Country="kazakhstan"}, new FemaleAthletesModel() {AthleteName = "Venus Williams", OnFieldEarning = 0.2, OffFieldEarning = 12,Country="united_states"}, new FemaleAthletesModel() {AthleteName = "Jessica Pegula", OnFieldEarning = 6, OffFieldEarning = 6.5,Country="united_states"}, new FemaleAthletesModel() {AthleteName = "Aryna Sabalenka", OnFieldEarning = 8.2, OffFieldEarning = 6.5,Country="belarus"}, new FemaleAthletesModel() {AthleteName = "Naomi Osaka", OnFieldEarning = 0, OffFieldEarning = 15,Country="japan"}, new FemaleAthletesModel() {AthleteName = "Emma Raducanu", OnFieldEarning = 0.2, OffFieldEarning = 15,Country="united_kingdom"}, new FemaleAthletesModel() {AthleteName = "Coco Gauff", OnFieldEarning = 6.7,OffFieldEarning = 15,Country="united_states"}, new FemaleAthletesModel() {AthleteName = "Eileen Gu",OffFieldEarning=22,OnFieldEarning=0.1,Country="china"}, new FemaleAthletesModel() {AthleteName = "Iga Swiatek",OnFieldEarning=9.9,OffFieldEarning=14,Country="poland"}, }; Streams = GetImageSources(); } private Dictionary GetImageSources() { Dictionary keyValues = new Dictionary(); Assembly assembly = typeof(MainPage).GetTypeInfo().Assembly; for (int i = 0; i < AthletesData.Count; i++) { string imageName = $"{AthletesData[i].Country}.png"; stream = assembly.GetManifestResourceStream($"HighestPaidFemaleAthletes.Resources.Images.{imageName}"); if (stream != null && AthletesData[i].AthleteName != null) { keyValues.Add(AthletesData[i].AthleteName.ToString(), stream); } } return keyValues; } } ``` ## Step 3: Configuring the Syncfusion .NET MAUI Charts control Let’s configure the Charts control using this [documentation](https://help.syncfusion.com/maui/cartesian-charts/getting-started) . ``` ``` ## Step 4: Transposing the chart In a column chart, the bars are oriented vertically, whereas in a bar chart, they are oriented horizontally. We are going to visualize our data in a horizontal orientation. So, we need to transpose the chart by enabling the **IsTransposed** property. With this, we can use it as a stacked bar chart. ``` ``` ## Step 5: Bind the data to the chart Bind the athletes’ income data to our [StackedColumnSeries](https://help.syncfusion.com/maui/cartesian-charts/stackedcolumn) . ``` ``` In the previous example, we used the [ItemsSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_ItemsSource) property to bind the stacked column chart with the **AthletesData** data collection, which contains the information on the on- and off-field earnings of the top-paid female athletes in 2023. Additionally, we set the [XBindingPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_XBindingPath) with the **AthleteName** property and [YBindingPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.XYDataSeries.html#Syncfusion_Maui_Charts_XYDataSeries_YBindingPath) with the **OnFieldEarning** and ** OffFieldEarning** properties in their series. ## Step 6: Customizing the axis We’ll use [the category axis](https://help.syncfusion.com/maui/cartesian-charts/axis/types#category-axis) to visualize the athletes with their countries. To do so, we need to customize the category axis. Therefore, in the code behind, extend the **CategoryAxisExt** class by inheriting the ** CategoryAxis** class. Next, override the **DrawAxis()** method to achieve the drawing of country flag images with the axis label. Get the images from the resource ** Stream**, then draw the image in the labels position. ``` public class CategoryAxisExt : CategoryAxis { protected override void DrawAxis(ICanvas canvas, Rect arrangeRect) { base.DrawAxis(canvas, arrangeRect); foreach (ChartAxisLabel label in VisibleLabels) { string? labelText = label.Content.ToString(); if (this.BindingContext is TopPaidFemaleAthleteInfo viewModel && labelText != null && viewModel.Streams.ContainsKey(labelText)) { Stream stream = viewModel.Streams[labelText]; var image = PlatformImage.FromStream(stream); var top = ValueToPoint(label.Position); // Assuming positions start from 0 canvas.DrawImage(image, (float)arrangeRect.Left + xOffset, top - yOffset, 25, 25); } } } } ``` Add the **CategoryAxisExt** class instance to the [XAxes](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html#Syncfusion_Maui_Charts_SfCartesianChart_XAxes) collection in the [SfCartesianChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html) . ``` ``` ## Step 7: Customizing the chart appearance We can customize the chart’s appearance by changing the chart title, axis elements, series, and more to enhance the readability of the data. ### Customizing the chart title Refer to the following code example for how to add a title and description in the chart for the plotted data. ``` ``` ### Customizing the legend Then, customize the chart legend using the [ItemTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartLegend.html#Syncfusion_Maui_Charts_ChartLegend_ItemTemplate) property and place it at the bottom using the [Placement](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartLegend.html#Syncfusion_Maui_Charts_ChartLegend_Placement) property. ``` ``` ### Customizing the chart axis Customize the x- and y-axes with the [Maximum](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.LogarithmicAxis.html#Syncfusion_Maui_Charts_LogarithmicAxis_Maximum) , [Interval](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.NumericalAxis.html#Syncfusion_Maui_Charts_NumericalAxis_Interval) , [LabelPlacement](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.CategoryAxis.html#Syncfusion_Maui_Charts_CategoryAxis_LabelPlacement) [EdgeLabelsDrawingMode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html#Syncfusion_Maui_Charts_ChartAxis_EdgeLabelsDrawingMode) and [ShowMajorGridLines](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html#Syncfusion_Maui_Charts_ChartAxis_ShowMajorGridLines) properties, as well as the **AxisTitle**, ** LabelStyle**, ** LineStyle** and ** TickStyle**. Refer to the following code example. ``` ``` ### **Customize the series appearance** Finally, customize the chart series by applying the **Fill** color and displaying the athlete information using ** DataLabels**. ``` ``` After executing the previous code examples, we will get output like in the following image. ![Visualizing the top-earning female athletes’ data using Syncfusion .NET MAUI stacked column chart](https://www.syncfusion.com/blogs/wp-content/uploads/2024/01/Visualizing-the-top-earning-female-athletes-data-using-Syncfusion-.NET-MAUI-stacked-column-chart.png) Visualizing the top-earning female athletes’ data using Syncfusion .NET MAUI stacked column chart ## GitHub reference For more details, refer to the [project on GitHub](https://github.com/SyncfusionExamples/Top-Female-Athletes-in-the-World-by-Income-in-2023) . ## Conclusion Thanks for reading! In this blog, we’ve seen how to visualize the top-earning female athletes’ data using the [Syncfusion MAUI stacked column chart](https://help.syncfusion.com/maui/cartesian-charts/stackedcolumn) . We encourage you to follow the steps discussed in this blog and share your thoughts in the comments below. If you require any assistance, you can contact us through our [support forums](https://www.syncfusion.com/forums) , [support portal](https://support.syncfusion.com/) , or [feedback portal](https://www.syncfusion.com/feedback) . We are always happy to assist you. See you in our next blog! ## Related blogs - [Syncfusion .NET MAUI 2024 Road Map](https://www.syncfusion.com/blogs/post/dotnet-maui-2024-road-map.aspx) - [Chart of the Week: Creating a .NET MAUI Bar Chart to Visualize Type 1 Diabetes Prevalence](https://www.syncfusion.com/blogs/post/dotnet-maui-bar-chart-diabetes.aspx) - [Chart of the Week: Creating a .NET MAUI Multiple Fast Line Chart to Analyze the Impact of Exported Goods on GDP](https://www.syncfusion.com/blogs/post/maui-fastline-chart-export-vs-gdp.aspx) - [Chart of the Week: Creating a .NET MAUI Stacked Column Chart for Global Smartphone Shipments](https://www.syncfusion.com/blogs/post/maui-stacked-column-chart-phone.aspx)