.NET MAUI Box and Whisker Chart

Overview

The .NET MAUI box and whisker chart is used to visualize a group of numerical data through its quartiles. It is also referred as a box plot chart. Box plots may also have lines extending vertically from the boxes (whiskers) indicating variability outside the upper and lower quartiles. You can create beautiful, animated, real-time, and high-performance box and whisker charts that support interactive features such as zooming and panning, trackball, tooltip, and selection.

Key features

.NET MAUI box and whisker chart in box plot mode

Box plot mode

The .NET MAUI box and whisker chart supports different types of rendering modes, such as exclusive, inclusive, and normal.

.NET MAUI box and whisker chart with outlier

Outlier

The outlier usually appears as a circle in the .NET MAUI box and whisker chart, which is the minimum and maximum data values.

.NET MAUI box and whisker chart with show median support

Show median

The .NET MAUI box and whisker chart allows you to enable or disable displaying the average value of the box plot.

.NET MAUI box and whisker chart with color and thickness customization

Customization

Customize the color of the box plot and outliers using APIs to make them visually unique. The box plot can be customized with a gradient color.

Code example

xaml
c#
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" 
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        x:Class="ChartExample.MainPage"
        xmlns:local="using:ChartExample"
        xmlns:chart="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts">
       
    <Grid>
        <chart:SfCartesianChart HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <!--Setting BindingContext-->
            <chart:SfCartesianChart.BindingContext>
                <local:ViewModel/>
            </chart:SfCartesianChart.BindingContext>

            <!--Initialize the horizontal axis for the .NET MAUI Cartesian Chart.-->
            <chart:SfCartesianChart.XAxes>
                <chart:CategoryAxis/>
            </chart:SfCartesianChart.XAxes>

            <!--Initialize the vertical axis for the .NET MAUI Cartesian Chart.-->
            <chart:SfCartesianChart.YAxes>
                <chart:NumericalAxis/>
            </chart:SfCartesianChart.YAxes>
           
            <!--Adding Box and Whisker Series to the .NET MAUI Cartesian Chart.-->
            <chart:BoxAndWhiskerSeries 
                        ItemsSource="{Binding Data}"
                        XBindingPath="Month"
                        YBindingPath="TargetList">
            </chart:BoxAndWhiskerSeries> 
        </chart:SfCartesianChart>
    </Grid>
</ContentPage>
public class Model
{
    public string Month { get; set; }

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

    public Model(string xValue, List<double> list)
    {
        Month = xValue;
        TargetList = list;
    }
}

public class ViewModel
{
    public ObservableCollection<Model> Data { get; set; }

    public ViewModel()
    {
        Data = new ObservableCollection<Model>()
        {
            new Model("Jan", new List<double> {26, 27, 28, 30, 32, 34, 35, 37, 35, 37, 45}),
            new Model("Feb", new List<double> {21, 23, 24, 25, 26, 27, 28, 30, 34, 36, 38}),
            new Model("Mar", new List<double> {27, 26, 28, 29, 29, 29, 32, 35, 32, 38, 53}),
            new Model("Apr", new List<double> {26, 27, 29, 32, 34, 35, 36, 37, 38, 39, 41, 43, 58}),
            new Model("May", new List<double> {26, 28, 29, 30, 32, 33, 35, 32, 34, 36, 52}), 
        };
    }
}