DEV Community

Cover image for Chart of the Week: Creating the .NET MAUI Scatter Chart to Visualize Different Sports Ball Sizes and Weights
Syncfusion, Inc. profile image Gayathri-github7
Gayathri-github7 for Syncfusion, Inc.

Posted on • Originally published at syncfusion.com on

Chart of the Week: Creating the .NET MAUI Scatter Chart to Visualize Different Sports Ball Sizes and Weights

#dotnetmaui #chart #maui #mobile

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.

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

Visualizing different sports ball sizes and weights using the .NET MAUI Scatter Chart

Let’s get started!

Step 1: Gathering the data

First, we need to gather information from the topend sports. We require data on ball Sizes and weights.

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;
    }
}
Enter fullscreen mode Exit fullscreen mode

Next, create the SportsBallViewModel class. It acts as an intermediary between the data models and user interface elements (scatter chart), preparing and formatting data for display and interaction.

Refer to the following code example.

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" });
    }
}
Enter fullscreen mode Exit fullscreen mode

Step 3: Configure the Syncfusion .NET MAUI Cartesian Charts

Let’s configure the .NET MAUI Cartesian Charts control using this documentation.

Refer to the following code example.

<chart:SfCartesianChart>

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

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

</chart:SfCartesianChart>
Enter fullscreen mode Exit fullscreen mode

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.

<chart:ScatterSeries XBindingPath="Weight"
                     YBindingPath="Size" 
                     ItemsSource="{Binding SportsBallData}">
</chart:ScatterSeries>
Enter fullscreen mode Exit fullscreen mode

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

<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>
Enter fullscreen mode Exit fullscreen mode

Customize the axes

Let’s customize the X- and Y-axes with the Minimum, Maximum, EdgeLabelsDrawingMode, and ShowMajorGridLines properties and the axis Title, LineStyle, and TickStyle properties.

Refer to the following code example.

<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>
Enter fullscreen mode Exit fullscreen mode

Customizing the Scatter series

Here, we will enhance the series appearance using the PaletteBrushes, PointHeight, and PointWidth properties.

Refer to the following code example.

<chart:ScatterSeries PaletteBrushes="{Binding PaletteBrushes}"
                     PointHeight="20" 
                     PointWidth="20">
</chart:ScatterSeries>
Enter fullscreen mode Exit fullscreen mode

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

Refer to the following code example.

<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>
Enter fullscreen mode Exit fullscreen mode

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

Visualizing different sports ball sizes and weights using the .NET MAUI Scatter Chart

GitHub reference

Use the .NET MAUI Scatter Chart 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 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 page. If you are not a Syncfusion customer, try our 30-day free trial to check out our incredible features.

You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!

Related blogs

Top comments (0)

Read next

arkaprabha288 profile image

Conquering Tech Interviews: Deep Dives

Arkaprabha Halder -

albertjokelin profile image

Removing redundant libraries from Makefiles

Albert Jokelin -

epigene profile image

TIL custom order with .in_order_of

Augusts Bautra -

iaasgeek profile image

Boletín AWS Open Source, June Edition

Guillermo Ruiz -