Chart of the Week: Creating the .NET MAUI Scatter Chart to Visualize Different Sports Ball Sizes and Weights
Tags: dotnetmaui, chart, maui, mobile
Published: 2024-06-19 16:23:47

---
title: Chart of the Week: Creating the .NET MAUI Scatter Chart to Visualize Different Sports Ball Sizes and Weights
published: true
date: 2024-06-19 13:18:24 UTC
tags: dotnetmaui, chart, maui, mobile
canonical_url: https://www.syncfusion.com/blogs/post/dotnet-maui-scatter-chart-sports-ball
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sb228cjwvu559jbybfi9.png
---

**TL;DR:** Let’s use the Syncfusion .NET MAUI Scatter Chart to visualize the sizes and weights of various sports balls and highlight their differences. This blog guides you through gathering data, preparing it, configuring the chart, and customizing its appearance and interactivity. Explore the GitHub demo for more details.

Welcome to our **Chart of the Week** blog series!

Today, we’ll visualize the sizes and weights of various sports balls using the [Syncfusion .NET MAUI  Scatter Chart.](https://www.syncfusion.com/maui-controls/maui-cartesian-charts/chart-types/maui-scatter-chart ".NET MAUI Scatter Chart")

Sports enthusiasts know that most sports use balls, which vary widely in size and weight. Understanding these variations can provide fascinating insights into the design and dynamics of each sport. The lightest ball is a Table Tennis ball, and the largest ball size is Basketball. These differences reflect each sport’s unique demands and rules, providing a deeper appreciation for their diversity.

The [Syncfusion .NET MAUI Scatter Chart](https://www.syncfusion.com/maui-controls/maui-cartesian-charts/chart-types/maui-scatter-chart ".NET MAUI Scatter Chart") is ideal for showcasing these differences. A scatter chart plots data points on a two-dimensional graph, making it easy to observe relationships between variables. The chart’s feature set includes data binding, tooltips, titles, and customizable axes, ensuring a clear and engaging visualization.

The following image shows the scatter chart we are going to create.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/Visualizing-different-sports-ball-sizes-and-weights-using-the-.NET-MAUI-Scatter-Chart.png" alt="Visualizing different sports ball sizes and weights using the .NET MAUI Scatter Chart" style="width:100%">

</figure>

Let’s get started!

## Step 1: Gathering the data

First, we need to gather information from the [topend sports.](https://www.topendsports.com/resources/equipment/balls.htm "Article: topend sports.") We require data on ball [Sizes](https://www.topendsports.com/resources/equipment/ball-size.htm "Article: Sports Ball Size (Diameter) Comparison") and [weights](https://www.topendsports.com/resources/equipment/ball-weight.htm "Article: Sports Ball Weight Comparison").

## Step 2: Prepare the data for the chart

Create a **SportsBallModel** class to define the structure of our sports ball data and a **SportsBallViewModel** class to handle the data manipulation and communication between the model and the scatter chart.

First, define the **SportsBallModel** class with the following properties:

- **Name:** Denotes the name of the sports ball, indicating the specific type or variant it represents.
- **Size:** Describes the dimensions of the sports ball, specifying its diameter.
- **Weight:** Quantifies the mass of the sports ball, measured in units such as grams.

Refer to the following code example.

```csharp
public class SportsBallModel
{
    public string Name { get; set; }
    public double Size { get; set; }
    public double Weight { get; set; }

    public SportsBallModel(string name, double size, double weight)
    {
        Name = name;
        Size = size;
        Weight = weight;
    }
}
```

Next, create the **SportsBallViewModel** class. It acts as an intermediary between the data models and user interface elements ([scatter chart](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ScatterSeries.html "ScatterSeries class of .NET MAUI Charts")), preparing and formatting data for display and interaction.

Refer to the following code example.

```csharp
public class SportsBallViewModel
{
    public List<SportsBallModel> SportsBallData { get; set; }

    public SportsBallViewModel()
    {

        SportsBallData = new List<SportsBallModel>();
        SportsBallData.Add(new SportsBallModel { Weight = 23, Size = 3.96, Name = "Squash" });
        SportsBallData.Add(new SportsBallModel { Weight = 2.7, Size = 3.99, Name = "Table Tennis" });
        SportsBallData.Add(new SportsBallModel { Weight = 45.93, Size = 4.27, Name = "Golf" });
        SportsBallData.Add(new SportsBallModel { Weight = 125, Size = 5.59, Name = "Jai Alai" });
        SportsBallData.Add(new SportsBallModel { Weight = 40, Size = 5.72, Name = "Racquetball" });
        SportsBallData.Add(new SportsBallModel { Weight = 156, Size = 5.72, Name = "Pool" });
        SportsBallData.Add(new SportsBallModel { Weight = 142, Size = 6.35, Name = "Lacrosse" });
        SportsBallData.Add(new SportsBallModel { Weight = 56.0, Size = 6.54, Name = "Tennis" });
        SportsBallData.Add(new SportsBallModel { Weight = 680, Size = 7.94, Name = "Pétanque" });
        SportsBallData.Add(new SportsBallModel { Weight = 155.9, Size = 7.11, Name = "Cricket" });
        SportsBallData.Add(new SportsBallModel { Weight = 156, Size = 7.11, Name = "Field Hockey" });
        SportsBallData.Add(new SportsBallModel { Weight = 142, Size = 7.30, Name = "Baseball" });
        SportsBallData.Add(new SportsBallModel { Weight = 22.1, Size = 7.29, Name = "Pickleball" });
        SportsBallData.Add(new SportsBallModel { Weight = 99, Size = 7.62, Name = "Polo" });
        SportsBallData.Add(new SportsBallModel { Weight = 166.6, Size = 8.89, Name = "Softball (slowpitch)" });
        SportsBallData.Add(new SportsBallModel { Weight = 453.6, Size = 9.21, Name = "Croquet" });
        SportsBallData.Add(new SportsBallModel { Weight = 178, Size = 9.70, Name = "Softball (fastpitch)" });
        SportsBallData.Add(new SportsBallModel { Weight = 920, Size = 10.67, Name = "Bocce" });
        SportsBallData.Add(new SportsBallModel { Weight = 400, Size = 18.03, Name = "Rhythmic gymnastics ball" });
        SportsBallData.Add(new SportsBallModel { Weight = 425, Size = 18.54, Name = "Team Handball" });
        SportsBallData.Add(new SportsBallModel { Weight = 260, Size = 20.70, Name = "Volleyball" });
        SportsBallData.Add(new SportsBallModel { Weight = 420, Size = 21.59, Name = "Football (Soccer)" });
        SportsBallData.Add(new SportsBallModel { Weight = 445, Size = 21.59, Name = "Korfball" });
        SportsBallData.Add(new SportsBallModel { Weight = 400, Size = 21.59, Name = "Water polo" });
        SportsBallData.Add(new SportsBallModel { Weight = 397, Size = 22.61, Name = "Netball" });
        SportsBallData.Add(new SportsBallModel { Weight = 623.7, Size = 23.88, Name = "Basketball" });
    }
}
```

## Step 3: Configure the Syncfusion .NET MAUI Cartesian Charts

Let’s configure the .NET MAUI Cartesian Charts control using this [documentation.](https://help.syncfusion.com/maui/cartesian-charts/getting-started "Getting Started with .NET MAUI Chart")

Refer to the following code example.

```xml
<chart:SfCartesianChart>

 <chart:SfCartesianChart.XAxes>
  <chart:CategoryAxis/>
 </chart:SfCartesianChart.XAxes>

 <chart:SfCartesianChart.YAxes>
  <chart:NumericalAxis/>
 </chart:SfCartesianChart.YAxes>  

</chart:SfCartesianChart>
```

## Step 4: Bind data to the .NET MAUI Scatter series

To display the sports ball data effectively, we’ll utilize the Syncfusion **ScatterSeries** instance and bind our **SportsBallData** collection to it. Each ball will be represented as a point on the chart, with its corresponding size and weight.

Refer to the following code example.

```xml
<chart:ScatterSeries XBindingPath="Weight"
                     YBindingPath="Size" 
                     ItemsSource="{Binding SportsBallData}">
</chart:ScatterSeries>
```

We’ve bound the **SportsBallData** collection from the **SportsBallViewModel** to the **ItemSource** property. The **XBindingPath** and **YBindingPath** properties are bound to the **Weight** and **Size** properties.

## Step 5: Customize the .NET MAUI Scatter Chart appearance

Let’s customize the appearance of the Syncfusion .NET MAUI Scatter Chart to enhance its readability.

### Adding the chart title

Adding a [title](https://help.syncfusion.com/maui/cartesian-charts/appearance "Getting Started with the Appearance in .NET MAUI Cartesian Chart") to the chart enhances its readability and aids users in understanding its content more effectively. By providing a clear and descriptive title, users can quickly grasp the purpose and context of the chart, making it more accessible and informative.

Refer to the following code example.

```xml
<chart:SfCartesianChart.Title> 
 <Grid> 
  <Grid.RowDefinitions> 
   <RowDefinition Height="{OnPlatform Android=68,Default=80,iOS=68}"/> 
  </Grid.RowDefinitions> 
  <Grid.ColumnDefinitions> 
   <ColumnDefinition Width="55"/> 
   <ColumnDefinition Width="Auto"/> 
  </Grid.ColumnDefinitions> 
  <Image Grid.Column="0"  
         Grid.RowSpan="2" 
         Source="balls_sports.png" 
         Margin="0,-25,0,0" 
         HeightRequest="70" 
         WidthRequest="50"/> 
  <StackLayout Grid.Column="1" 
               Grid.Row="0" 
               Margin="7,7,0,0"> 
   <Label Text="Exploring Ball Sizes and Weights Across Different Sports"     
          FontSize="{OnPlatform Android=12,Default=16,iOS=12}"                     
          FontAttributes="Bold" 
          TextColor="Black"/> 
   <Label Text="A Comparative Analysis Across Different Sports Ball Sizes and Weights"  
          FontSize="{OnPlatform Android=10,Default=12,iOS=10}"     
          TextColor="Black" 
          Margin="0,2,0,0"/> 
  </StackLayout> 
 </Grid> 
</chart:SfCartesianChart.Title>
```

### Customize the axes

Let’s customize the X- and Y-axes with the [Minimum](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.LogarithmicAxis.html#Syncfusion_Maui_Charts_LogarithmicAxis_Minimum "Minimum property of .NET MAUI Charts"), [Maximum](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.LogarithmicAxis.html#Syncfusion_Maui_Charts_LogarithmicAxis_Maximum "Maximum property of .NET MAUI Charts"), [EdgeLabelsDrawingMode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html#Syncfusion_Maui_Charts_ChartAxis_EdgeLabelsDrawingMode "EdgeLabelsDrawingMode property of .NET MAUI Charts"), and [ShowMajorGridLines](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html#Syncfusion_Maui_Charts_ChartAxis_ShowMajorGridLines "ShowMajorGridLines property of .NET MAUI Charts") properties and the axis Title, LineStyle, and TickStyle properties.

Refer to the following code example.

```xml
<chart:SfCartesianChart.XAxes>
 <chart:NumericalAxis ShowMajorGridLines=”True”
                      Maximum=”700”
                      Interval=”100” 
                      EdgeLabelsDrawingMode=”Shift”
                      RangePadding=”Additional”>
  <chart:NumericalAxis.MajorTickStyle>
   <chart:ChartAxisTickStyle Stroke=”Black”/>
  </chart:NumericalAxis.MajorTickStyle>
  <chart:NumericalAxis.AxisLineStyle>
   <chart:ChartLineStyle Stroke=”Black”/>
  </chart:NumericalAxis.AxisLineStyle>
  <chart:NumericalAxis.Title>
   <chart:ChartAxisTitle Text=”Weight in Gram” TextColor=”Black”/>
  </chart:NumericalAxis.Title>
 </chart:NumericalAxis>
</chart:SfCartesianChart.Xaxes>

<chart:SfCartesianChart.Yaxes>
 <chart:NumericalAxis EdgeLabelsDrawingMode=”Center”
                       Maximum=”31”
                       Minimum=”0”
                       Interval=”5”
                       ShowMajorGridLines=”False”>
  <chart:NumericalAxis.MajorTickStyle>
   <chart:ChartAxisTickStyle Stroke=”Black”/>
  </chart:NumericalAxis.MajorTickStyle>
  <chart:NumericalAxis.AxisLineStyle>
   <chart:ChartLineStyle Stroke=”Black”/>
  </chart:NumericalAxis.AxisLineStyle>
  <chart:NumericalAxis.Title>
   <chart:ChartAxisTitle Text=”Size in Centimeter” Stroke=”Black”/>
  </chart:NumericalAxis.Title>
 </chart:NumericalAxis>
</chart:SfCartesianChart.Yaxes>
```

### Customizing the Scatter series

Here, we will enhance the series appearance using the [PaletteBrushes](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_PaletteBrushes "PaletteBrushes property of .NET MAUI Charts"), [PointHeight](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ScatterSeries.html#Syncfusion_Maui_Charts_ScatterSeries_PointHeight "PointHeight property of .NET MAUI Charts"), and [PointWidth](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ScatterSeries.html#Syncfusion_Maui_Charts_ScatterSeries_PointWidth "PointWidth property of .NET MAUI Charts") properties.

Refer to the following code example.

```xml
<chart:ScatterSeries PaletteBrushes="{Binding PaletteBrushes}"
                     PointHeight="20" 
                     PointWidth="20">
</chart:ScatterSeries>
```

### Adding interactivity to the chart

Now, enable tooltips in the scatter series to enhance data visualization and provide additional insights. Customize the tooltip content to display relevant information, such as the name, size, and weight of a sports ball, that improves user experience by offering immediate, context-specific information and deeper data insights using the [TooltipTemplate](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.html#Syncfusion_Maui_Charts_ChartSeries_TooltipTemplate "TooltipTemplate property of .NET MAUI Charts") property.

Refer to the following code example.

```xml
<chart:ScatterSeries.TooltipTemplate>
 <DataTemplate>
  <Grid>
   <Grid.RowDefinitions>
    <RowDefinition Height=”Auto”/>
    <RowDefinition Height=”Auto”/>
    <RowDefinition Height=”Auto”/>
   </Grid.RowDefinitions>
   <Grid.ColumnDefinitions>
    <ColumnDefinition Width=”Auto”/>
   </Grid.ColumnDefinitions>
   <Label Grid.Row=”0” 
          Grid.Column=”0” LineBreakMode=”WordWrap”  
          MaximumWidthRequest=”100” Text=”{Binding  
          Item.Name,StringFormat=’{0}’}”   
          HorizontalTextAlignment= »Center » HorizontalOptions= »Center »  
          VerticalTextAlignment= »Center » FontAttributes= »Bold »  
          Margin=”0,3,0,3” FontSize=”13.5” TextColor=”White”/>
   <BoxView Grid.Row=”1” Grid.Column=”0” VerticalOptions=”Center” Color=”White” HeightRequest=”1” />
   <StackLayout Grid.Row=”2” Grid.Column=”0” Orientation=”Vertical” VerticalOptions=”Fill” Spacing=”0” Padding=”3” Margin=”0”>
    <Label Text=”{Binding Item.Weight,StringFormat=’Weight : {0} g’}” 
           VerticalTextAlignment=”Center”
           HorizontalOptions=”Start”
           Margin=”0,0,3,0” FontSize=”13.5” TextColor=”White”/>
    <Label Text=”{Binding Item.Size,StringFormat=’Size : {0} cm’}” 
           VerticalTextAlignment=”Center”
           HorizontalOptions=”Start” Margin=”0,0,3,0”
           FontSize=”12” TextColor=”White”/>
   </StackLayout>
  </Grid>
 </DataTemplate>
</chart:ScatterSeries.TooltipTemplate>
```

After executing these code examples, we will get the output that resembles the following image.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/Visualizing-different-sports-ball-sizes-and-weights-using-the-.NET-MAUI-Scatter-Chart.gif" alt="Visualizing different sports ball sizes and weights using the .NET MAUI Scatter Chart" style="width:100%">

  <figcaption>Visualizing different sports ball sizes and weights using the .NET MAUI Scatter Chart</figcaption>

</figure>

## GitHub reference

Use the .NET MAUI Scatter Chart [GitHub demo](https://github.com/SyncfusionExamples/Creating-a-Bubble-Chart-to-Explore-Ball-Sizes-and-Weights-Across-Different-Sports/tree/Task-889684_scatter_blog_sample_for_.Net_Maui "Creating a Bubble Chart to Explore Ball Sizes and Weights Across Different Sports GitHub demo") to visualize different sports ball sizes and weights for more details.

## Conclusion

Thanks for reading! In this blog, we’ve seen how to use the Syncfusion [MAUI Scatter chart](https://help.syncfusion.com/maui/cartesian-charts/scatter "Getting Started with the Scatter Chart in .NET MAUI Chart") to visualize the different sports ball sizes and weights. 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 new version of Essential Studio on the [License and Downloads](https://www.syncfusion.com/account "Essential Studio License and Downloads page") page. If you are not a Syncfusion customer, try our 30-day [free trial](https://www.syncfusion.com/downloads "Get free evaluation for the Essential Studio products") to check out our incredible features. 

You can also 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!

## Related blogs

- [Introducing the New .NET MAUI Digital Gauge Control](https://www.syncfusion.com/blogs/post/dotnetmaui-digital-gauge-control "Blog: Introducing the New .NET MAUI Digital Gauge Control")
- [Introducing the 12th Set of New .NET MAUI Controls and Features](https://www.syncfusion.com/blogs/post/syncfusion-dotnet-maui-2024-volume-2 "Blog: Introducing the 12th Set of New .NET MAUI Controls and Features")
- [Microsoft Build 2024: The Syncfusion Experience](https://www.syncfusion.com/blogs/post/microsoft-build-2024-syncfusion-recap "Blog: Microsoft Build 2024: The Syncfusion Experience")
- [What’s New in .NET MAUI Charts: 2024 Volume 2](https://www.syncfusion.com/blogs/post/dotnet-maui-charts-2024-volume-2 "Blog: What’s New in .NET MAUI Charts: 2024 Volume 2")