---
title: "Chart of the Week: Creating a .NET MAUI Box and Whisker Chart for Machine Impact Test Analysis"
published_at: "2023-08-10T10:29:04+00:00"
modified_at: "2026-01-15T08:33:29+00:00"
url: "https://www.syncfusion.com/blogs/post/dotnet-maui-box-and-whisker-chart-machine-impact-test"
excerpt: "This blog explains how to visualize machine impact test results using the Syncfusion .NET MAUI Box and Whisker 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: Creating a .NET MAUI Box and Whisker Chart for Machine Impact Test Analysis

[Sowndharya Selladurai](https://www.syncfusion.com/blogs/author/sowndharya-selladurai)

![Chart of the Week Creating a .NET MAUI Box and Whisker Chart for Machine Impact Test Analysis](https://www.syncfusion.com/blogs/wp-content/uploads/2023/08/Chart-of-the-Week-Creating-a-.NET-MAUI-Box-and-Whisker-Chart-for-Machine-Impact-Test-Analysis.png)


Welcome to our Chart of the Week blog series!

In this blog, we’ll visualize machine impact test results using the [Syncfusion .NET MAUI Box and Whisker Chart](https://www.syncfusion.com/maui-controls/maui-cartesian-charts/chart-types/maui-box-and-whisker-chart)
. This control is supported on desktop (Windows and Mac) and mobile platforms (Android and iOS).

A machine impact test is used to find the total energy absorbed by raw materials under high strain rates. This test assesses the material’s strength, resilience, and durability under real-world conditions where sudden impacts or shock loading may occur.

Let’s explore the steps to visualize the machine impact test results using the Syncfusion .NET MAUI Box and Whisker Chart.

## Step 1: Gather the machine impact test data

Before creating the chart, let’s gather the data on the [machine’s impact results](https://www.itl.nist.gov/div898/handbook/datasets/SPLETT2.DAT)
.

## Step 2: Prepare the data for the chart

Create the **ImpactTestModel** class with the ** MachineName** property to store the name of the machine and the ** AbsorbedEnergy** property to store a list of energy absorption values for that machine. The constructor of the ** ImpactTestResultModel** class allows us to initialize these properties.

Refer to the following code example.

```
public class ImpactTestModel
{
    public string MachineName { get; set; }

    public List<double> AbsorbedEnergy { get; set; }

    public ImpactTestModel(string machineName, List<double> absorbedEnergy)
    {
        MachineName = machineName;
        AbsorbedEnergy = absorbedEnergy;
    }
}
```

Next, create the impact test results collection using the **ImpactTestViewModel** class and store the collection in an observable collection using the **ImpactTestResults** property.

Refer to the following code example.

```
public class ImpactTestViewModel
{
    public ObservableCollection<ImpactTestModel> ImpactTestResults { get; set; }
       
    public List<Brush> CustomBrushes { get; set; }

    public ImpactTestViewModel()
    {
      ImpactTestResults = new ObservableCollection<ImpactTestModel> 
      {
         new ImpactTestModel("Tinius 1", new List<double> { 67.4,65.5,72.0,73.6,65.2,67.0,66.3,67.9,65.8,69.9,64.5,66.0,66.8,67.0,69.9,70.1,69.7,68.3,67.0,68.2,65.0,66.6,65.4,68.1 }),
         new ImpactTestModel("Tinius 2", new List<double> { 69.0,66.2,70.0,68.5,66.0,67.5,68.5,66.5,73.0,69.0,69.0,74.5,68.0,68.5,67.5,70.0,69.0,72.5,68.0,69.0,69.0,71.0,68.0,75.0,67.0 }),
         new ImpactTestModel("Satec", new List<double> { 73.0,78.9,75.0,72.3,72.4,74.1,72.0,70.9,74.5,72.0,72.5,72.4,74.0,75.0,70.9,70.9,76.6,74.2,69.5,68.8,68.5,70.1,73.0,70.9 }),
         new ImpactTestModel("Tokyo", new List<double> { 67.6,64.2,65.9,65.9,68.2,71.1,67.6,71.6,72.8,68.2,67.6,67.1,67.1,68.2,65.4,66.5,67.6,67.1,71.1,67.1,65.4,67.6,67.6,70.5,70.5 }),  
      };
   }
}
```

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

Configure the Syncfusion .NET MAUI Cartesian Charts using this [documentation](https://help.syncfusion.com/maui/cartesian-charts/getting-started)
.

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

## Step 4: Bind the data to the Box and Whisker Chart

To display the machine impact test results, we’ll use the Syncfusion **BoxAndWhiskerSeries** instance.

```
<chart:BoxAndWhiskerSeries ItemsSource="{Binding ImpactTestResults}"
                           XBindingPath="MachineName"
                           YBindingPath="AbsorbedEnergy"/>
```

In the previous code example, we’ve bound the **ItemsSource** property with the impact test results data collection. The ** XBindingPath** and ** YBindingPath** properties are bound with the ** MachineName** and ** AbsorbedEnergy** properties.

## Step 5: Customizing the chart appearance

Let’s see how to customize the elements of the .NET MAUI Box and Whisker Chart to get a pleasing appearance.

### Customizing the chart title

To customize the chart title, set the **Title** property of the SfCartesianChart control. Define the text, alignment, line break mode, font size, and font attributes for the title.

Refer to the following code example.

```
<chart:SfCartesianChart.Title>
 <Border Background="#6699cc" StrokeThickness="1" Margin="0">
  <Label Text="Analyzing the Machines' Impact Test Results"
         HorizontalTextAlignment="Center"
         VerticalTextAlignment="Center"
         TextColor="White" 
         FontSize="17"
         FontAttributes="Bold"
         Margin="10"/>
 </Border>
</chart:SfCartesianChart.Title>
```

### Customizing the chart axes

Refer to the following code example to customize the x- and y-axes of the chart using the **Text**, ** TextColor**, and ** Interval** properties.

```
<chart:SfCartesianChart.XAxes>
 <chart:CategoryAxis ShowMajorGridLines="False">
  <chart:CategoryAxis.Title>
   <chart:ChartAxisTitle Text="Machine Names" TextColor="Black"/>
  </chart:CategoryAxis.Title>
  <chart:CategoryAxis.LabelStyle>
   <chart:ChartAxisLabelStyle TextColor="Black"/>
  </chart:CategoryAxis.LabelStyle>
 </chart:CategoryAxis>
</chart:SfCartesianChart.XAxes>

<chart:SfCartesianChart.YAxes>
 <chart:NumericalAxis Interval="2" Maximum="80"
                      ShowMajorGridLines="False">
  <chart:NumericalAxis.Title>
   <chart:ChartAxisTitle Text="Absorbed Energy (in foot-pounds) "
                         TextColor="Black"/>
  </chart:NumericalAxis.Title>
  <chart:NumericalAxis.LabelStyle>
   <chart:ChartAxisLabelStyle TextColor="Black"/>
  </chart:NumericalAxis.LabelStyle>
 </chart:NumericalAxis>
</chart:SfCartesianChart.YAxes>
```

### Customizing the Box and Whisker series

Refer to the following code examples to customize the **BoxAndWhiskerSeries**. In it, we customize the tooltip to display the maximum, minimum, median, lower quartile (Q1), and upper quartile (Q3) values.

```
<chart:BoxAndWhiskerSeries ShowMedian="True"
                            Stroke="Black"
                            StrokeWidth="2"
                            EnableTooltip="True"
                            EnableAnimation="True">
</chart:BoxAndWhiskerSeries>
```

### Customizing the chart color

We can apply colors to differentiate the data for each machine using the [PalettedBrushes](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartSeries.htm#Syncfusion_Maui_Charts_ChartSeries_PaletteBrushes)
 property.

**C#**

```
public List<Brush> CustomBrushes { get; set; }

public ImpactTestAnalysisViewModel()
 {
     CustomBrushes = new List<Brush>();

     CustomBrushes.Add(new SolidColorBrush(Color.FromRgb(138, 161, 120)));
     CustomBrushes.Add(new SolidColorBrush(Color.FromRgb(90, 116, 140)));
     CustomBrushes.Add(new SolidColorBrush(Color.FromRgb(89, 89, 89)));
     CustomBrushes.Add(new SolidColorBrush(Color.FromRgb(222, 149, 110)));      
 }
```

**XML**

```
<chart:BoxAndWhiskerSeries PaletteBrushes="{Binding CustomBrushes}"
                           Opacity="0.7">
</chart:BoxAndWhiskerSeries>
```

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

![Visualizing the Machine Impact Test Analysis Using the Syncfusion .NET MAUI Box and Whisker Chart](https://www.syncfusion.com/blogs/wp-content/uploads/2023/08/Visualizing-the-Machine-Impact-Test-Analysis-Using-the-Syncfusion-.NET-MAUI-Box-and-Whisker-Chart.png)

Visualizing the Machine Impact Test Analysis Using the Syncfusion .NET MAUI Box and Whisker Chart

## GitHub reference

For more information, refer to the [project on GitHub](https://github.com/SyncfusionExamples/Creating-a-Box-and-Whisker-Chart-for-Analyzing-the-Machine-Impact-Test)
.

## Conclusion

Thanks for reading! In this blog, we’ve seen how to visualize a machine impact test analysis using Syncfusion’s [.NET MAUI Box and Whisker Chart](https://www.syncfusion.com/maui-controls/maui-cartesian-charts/chart-types/maui-box-and-whisker-chart)
. We encourage you to follow the steps discussed and share your thoughts in the comments below.

You can also contact us via our [support forum](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

- [Develop a Loan Interest Calculator App in .NET MAUI](https://www.syncfusion.com/blogs/post/loan-interest-calculator-dotnet-maui.aspx)
- [Chart of the Week: Creating a .NET MAUI Pyramid Chart of Global Wealth Distribution](https://www.syncfusion.com/blogs/post/dotnet-maui-pyramid-chart-visualize-global-wealth-distribution.aspx)
- [Chart of the Week: Creating a Doughnut Chart for the World’s Top Coffee-Producing Countries](https://www.syncfusion.com/blogs/post/dotnet-maui-doughnut-chart-visualize-coffee-production.aspx)
- [Introducing the New .NET MAUI Accordion Control](https://www.syncfusion.com/blogs/post/new-dotnet-maui-accordion-control.aspx)