Chart of the Week: Create a .NET MAUI Stacked Column Chart for the Top-Earning Female Athletes
Tags: dotnetmaui, charts, mobile, dataviz
Published: 2024-02-02 02:58:43

---
title: Chart of the Week: Create a .NET MAUI Stacked Column Chart for the Top-Earning Female Athletes
published: true
date: 2024-01-31 13:56:37 UTC
tags: dotnetmaui, charts, mobile, dataviz
canonical_url: https://www.syncfusion.com/blogs/post/maui-stackedcolumn-chart-athlete.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s0zfo5788amauh1v28k1.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 "Stacked Column Chart in .NET MAUI Chart"). 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 "Article: The World’s Highest-Paid Female Athletes 2023") 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.

```csharp
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.

```csharp
public class TopPaidFemaleAthleteInfo
{
    public ObservableCollection<FemaleAthletesModel> AthletesData { get; set; }

    public Dictionary<string, Stream> Streams { get; } = new Dictionary<string, Stream>();

    Stream? stream;
    public TopPaidFemaleAthleteInfo()
    {
        AthletesData = new ObservableCollection<FemaleAthletesModel>()
        {
            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<string, Stream> GetImageSources()
    {
        Dictionary<string, Stream> keyValues = new Dictionary<string, Stream>();

        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 "Getting Started with .NET MAUI Chart").

```xml
<chart:SfCartesianChart>                            
 <chart:SfCartesianChart.Xaxes>
  <chart:CategoryAxis />
 </chart:SfCartesianChart.Xaxes>
 <chart:SfCartesianChart.Yaxes>
  <chart:NumericalAxis/>
 </chart:SfCartesianChart.Yaxes>                       
</chart:SfCartesianChart>
```

## 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.

```xml
<chart:SfCartesianChart IsTransposed="True">                            
 <chart:SfCartesianChart.XAxes>
  <chart:CategoryAxis />
 </chart:SfCartesianChart.XAxes>
 <chart:SfCartesianChart.YAxes>
  <chart:NumericalAxis/>
 </chart:SfCartesianChart.YAxes>                       
</chart:SfCartesianChart>
```

## Step 5: Bind the data to the chart

Bind the athletes’ income data to our [StackedColumnSeries](https://help.syncfusion.com/maui/cartesian-charts/stackedcolumn "Stacked Column Chart in .NET MAUI Chart").

```xml
<!--On-Field Earning Series-->
<chart:StackingColumnSeries ItemsSource="{Binding AthletesData}" XBindingPath="AthleteName" YBindingPath="OnFieldEarning">
</chart:StackingColumnSeries>

<!--Off-Field Earning Series-->
<chart:StackingColumnSeries ItemsSource="{Binding AthletesData}" XBindingPath="AthleteName" YBindingPath="OffFieldEarning">
</chart:StackingColumnSeries>
```

In the previous example, we used the [ItemsSource](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_ItemsSource "ItemsSource Property for .NETMAUI Charts") 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 "XBindingPath Property for .NETMAUI Charts") with the **AthleteName** property and [YBindingPath](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.XYDataSeries.html#Syncfusion_Maui_Charts_XYDataSeries_YBindingPath "YBindingPath Property for .NETMAUI Charts") 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 "Start with the 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.

```csharp
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 "XAxes Property for .NETMAUI Charts") collection in the [SfCartesianChart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.SfCartesianChart.html "SfCartesianChart Class for .NETMAUI Charts").

```xml
<chart:SfCartesianChart>                            
 <chart:SfCartesianChart.XAxes>
  <local:CategoryAxisExt />
 </chart:SfCartesianChart.XAxes>
 <chart:SfCartesianChart.YAxes>
  <chart:NumericalAxis/>
 </chart:SfCartesianChart.YAxes>                       
</chart:SfCartesianChart>
```

## 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.

```xml
<chart:SfCartesianChart.Title>
 <Grid>
  <Grid.ColumnDefinitions>
   <ColumnDefinition Width="1*"/>
   <ColumnDefinition Width="{OnPlatform Android=49*,WinUI=59*,MacCatalyst=59*,iOS=49*}"/>
  </Grid.ColumnDefinitions>
  <VerticalStackLayout Background="#E6FF0088 " Margin="10,5,0,15" Grid.Column="0" Grid.RowSpan="2"/>
   <VerticalStackLayout Grid.Column="1" Margin="5">
    <Label Text="Top Female Athletes in the World by Income, 2023" FontSize="Subtitle" FontFamily="centurygothic" Padding="0,0,5,5" HorizontalTextAlignment="Start" FontAttributes="Bold" TextColor="White"/>
    <Label Text="The highest paid female athletes in terms of total earnings in 2023" HorizontalTextAlignment="Start" FontSize="{OnPlatform Android=10,WinUI=10,MacCatalyst=16,iOS=11}" FontFamily="centurygothic" TextColor="White" Padding="0,0,0,10"/>
   </VerticalStackLayout>
 </Grid>
</chart:SfCartesianChart.Title>
```

### 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 "ItemTemplate Property for .NETMAUI Charts") 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 "Placement Property for .NETMAUI Charts") property.

```xml
<chart:SfCartesianChart.Legend>
 <chart:ChartLegend Placement="Bottom">
  <chart:ChartLegend.ItemTemplate>
   <DataTemplate>
    <StackLayout Orientation="Horizontal" Margin="5">
     <Rectangle HeightRequest="15" WidthRequest="15" Margin="3" Background="{Binding IconBrush}"/>
     <Label Text="{Binding Text}" Margin="3" TextColor="White" FontSize="12"/>
    </StackLayout>
   </DataTemplate>
  </chart:ChartLegend.ItemTemplate>
 </chart:ChartLegend>
</chart:SfCartesianChart.Legend>
```

### 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 "Maximum Property for .NETMAUI Charts"), [Interval](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.NumericalAxis.html#Syncfusion_Maui_Charts_NumericalAxis_Interval "Interval Property for .NETMAUI Charts"), [LabelPlacement](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.CategoryAxis.html#Syncfusion_Maui_Charts_CategoryAxis_LabelPlacement "LabelPlacement Property for .NETMAUI Charts") [EdgeLabelsDrawingMode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html#Syncfusion_Maui_Charts_ChartAxis_EdgeLabelsDrawingMode "EdgeLabelsDrawingMode Property for .NETMAUI Charts") and [ShowMajorGridLines](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html#Syncfusion_Maui_Charts_ChartAxis_ShowMajorGridLines "ShowMajorGridLines Property for .NETMAUI Charts") properties, as well as the **AxisTitle**, **LabelStyle**, **LineStyle** and **TickStyle**.  
Refer to the following code example.

```xml
<chart:SfCartesianChart.XAxes>
 <local:CategoryAxisExt ShowMajorGridLines="False" LabelPlacement="BetweenTicks" EdgeLabelsDrawingMode="{OnPlatform Android=Center,iOS= Center}" AutoScrollingMode="{OnPlatform Android=Start,iOS=Start}" AutoScrollingDelta="{OnPlatform Android=5,iOS=5}">
  <local:CategoryAxisExt.AxisLineStyle>
   <chart:ChartLineStyle Stroke="Black" StrokeWidth="0"/>
  </local:CategoryAxisExt.AxisLineStyle>
  <local:CategoryAxisExt.MajorTickStyle>
   <chart:ChartAxisTickStyle StrokeWidth="0"/>
  </local:CategoryAxisExt.MajorTickStyle>
  <local:CategoryAxisExt.LabelStyle>
   <chart:ChartAxisLabelStyle TextColor="white" FontAttributes="Bold" LabelAlignment="Center" Margin="{OnPlatform WinUI='40,4,4,4',Android='20,4,4,4'}" FontSize="10"/>
  </local:CategoryAxisExt.LabelStyle>
 </local:CategoryAxisExt>
</chart:SfCartesianChart.XAxes>

<chart:SfCartesianChart.YAxes>
 <chart:NumericalAxis Interval="5" Maximum="26" EdgeLabelsDrawingMode="Center" ShowMajorGridLines="False">
  <chart:NumericalAxis.AxisLineStyle>
   <chart:ChartLineStyle StrokeWidth="0"/>
  </chart:NumericalAxis.AxisLineStyle>
  <chart:NumericalAxis.MajorTickStyle>
   <chart:ChartAxisTickStyle StrokeWidth="0"/>
  </chart:NumericalAxis.MajorTickStyle>
  <chart:NumericalAxis.LabelStyle>
   <chart:ChartAxisLabelStyle LabelFormat="$0M" TextColor="White" FontAttributes="Bold" FontSize="10"/>
  </chart:NumericalAxis.LabelStyle>
 </chart:NumericalAxis>
</chart:SfCartesianChart.YAxes>
```

### **Customize the series appearance**

Finally, customize the chart series by applying the **Fill** color and displaying the athlete information using **DataLabels**.

```xml
<!--On-Field Earning Series-->
<chart:StackingColumnSeries ItemsSource="{Binding AthletesData}" XBindingPath="AthleteName" YBindingPath="OnFieldEarning" Fill="#E6FF0088 " Label="On-Field Earnings" ShowDataLabels="True">
 <chart:StackingColumnSeries.DataLabelSettings>
  <chart:CartesianDataLabelSettings LabelPlacement="Outer">
   <chart:CartesianDataLabelSettings.LabelStyle>
    <chart:ChartDataLabelStyle FontAttributes="Bold" LabelFormat="$0.#M"/>
   </chart:CartesianDataLabelSettings.LabelStyle>
  </chart:CartesianDataLabelSettings>
 </chart:StackingColumnSeries.DataLabelSettings>
</chart:StackingColumnSeries>

<!--Off-Filed Earning Series-->
<chart:StackingColumnSeries ItemsSource="{Binding AthletesData}" XBindingPath="AthleteName" YBindingPath="OffFieldEarning" Fill="#E640ACFF " Label="Off-Field Earnings" ShowDataLabels="True" >
 <chart:StackingColumnSeries.DataLabelSettings>
  <chart:CartesianDataLabelSettings LabelPlacement="Outer">
   <chart:CartesianDataLabelSettings.LabelStyle>
    <chart:ChartDataLabelStyle FontAttributes="Bold" LabelFormat="$0.#M"/>
   </chart:CartesianDataLabelSettings.LabelStyle>
  </chart:CartesianDataLabelSettings>
 </chart:StackingColumnSeries.DataLabelSettings>
</chart:StackingColumnSeries>
```

After executing the previous code examples, we will get output like in the following image.

<figure>

  <img src="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" alt="Visualizing the top-earning female athletes’ data using Syncfusion .NET MAUI stacked column chart" style="width:100%">

  <figcaption>Visualizing the top-earning female athletes’ data using Syncfusion .NET MAUI stacked column chart</figcaption>

</figure>

## 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 "Chart of the Week Create a Stacked Column Chart for Visualizing the Top Earning Female Athletes GitHub demo").

## 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 "Stacked Column Chart in .NET MAUI Chart"). 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 "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 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 "Blog: Syncfusion .NET MAUI 2024 Road Map")
- [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 "Blog: Chart of the Week: Creating a .NET MAUI Bar Chart to Visualize Type 1 Diabetes Prevalence")
- [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 "Blog: Chart of the Week: Creating a .NET MAUI Multiple Fast Line Chart to Analyze the Impact of Exported Goods on GDP")
- [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 "Blog: Chart of the Week: Creating a .NET MAUI Stacked Column Chart for Global Smartphone Shipments")