--- title: "Creating the .NET MAUI Scatter Chart to Visualize Different Sports Ball Sizes and Weights" published_at: "2024-06-19T13:18:24+00:00" modified_at: "2025-12-30T12:12:21+00:00" url: "https://www.syncfusion.com/blogs/post/dotnet-maui-scatter-chart-sports-ball" excerpt: "This blog explains how to visualize different sports ball sizes and weights using the Syncfusion .NET MAUI Scatter Chart control." taxonomy_category: - ".NET MAUI" - "Chart" - "Chart of the week" - "Desktop" - "Mobile" - "UI" taxonomy_post_tag: - ".NET MAUI" - "Charts" - "desktop" - "MAUI" - "Mobile" --- [Chart of the week](https://www.syncfusion.com/blogs/category/chart-of-the-week) # Creating the .NET MAUI Scatter Chart to Visualize Different Sports Ball Sizes and Weights [Harsha Midadhala](https://www.syncfusion.com/blogs/author/harsha-midadhala-khajareddy-midadhala) ![Chart of the Week Creating the .NET MAUI Scatter Chart to Visualize Different Sports Ball Sizes and Weights](https://www.syncfusion.com/blogs/wp-content/uploads/2024/06/Chart-of-the-Week-Creating-the-.NET-MAUI-Scatter-Chart-to-Visualize-Different-Sports-Ball-Sizes-and-Weights.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) 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) 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. 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) We require data on ball [Sizes](https://www.topendsports.com/resources/equipment/ball-size.htm) and [weights](https://www.topendsports.com/resources/equipment/ball-weight.htm) . ## 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. ``` 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) ), preparing and formatting data for display and interaction. Refer to the following code example. ``` public class SportsBallViewModel { public List SportsBallData { get; set; } public SportsBallViewModel() { SportsBallData = new List(); 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) Refer to the following code example. ``` ``` ## 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. ``` ``` 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) 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. ``` ``` ### 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) , [Maximum](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.LogarithmicAxis.html#Syncfusion_Maui_Charts_LogarithmicAxis_Maximum) , [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 and the axis Title, LineStyle, and TickStyle properties. Refer to the following code example. ``` ``` ### 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) , [PointHeight](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ScatterSeries.html#Syncfusion_Maui_Charts_ScatterSeries_PointHeight) , and [PointWidth](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ScatterSeries.html#Syncfusion_Maui_Charts_ScatterSeries_PointWidth) properties. Refer to the following code example. ``` ``` ### 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) property. Refer to the following code example. ``` ``` After executing these code examples, we will get the output that resembles the following image. Visualizing different sports ball sizes and weights using the .NET MAUI Scatter Chart ## GitHub reference Use the .NET MAUI Scatter Chart [GitHub demo](https://github.com/SyncfusionExamples/Creating-a-Scatter-Chart-to-Explore-Ball-Sizes-and-Weights-Across-Different-Sports) 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) 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) page. If you are not a Syncfusion customer, try our 30-day [free trial](https://www.syncfusion.com/downloads) to check out our incredible features. You can also 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! ## Related blogs - [Introducing the New .NET MAUI Digital Gauge Control](https://www.syncfusion.com/blogs/post/dotnetmaui-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) - [Microsoft Build 2024: The Syncfusion Experience](https://www.syncfusion.com/blogs/post/microsoft-build-2024-syncfusion-recap) - [What’s New in .NET MAUI Charts: 2024 Volume 2](https://www.syncfusion.com/blogs/post/dotnet-maui-charts-2024-volume-2)