Null Values Support in .NET MAUI Chart

In many scenarios some of the data points that are visualized in the Chart contain empty or null values. These are the cases when data is not available for some records from the used dataset.

In case of Cartesian Series that require X and Y axes (Line, Area, Bar, and so on), the Chart represents null data points with an empty space or gap. In case of other chart types (Pie or Donut), these data points are not visualized.

The following example demonstrates a data-bound scenario where a nullable double type is used.

1. Create a ViewModel with a collection of CategoryItems objects, where a few of the items have null values:

• C#

public class ViewModel
{
    public ViewModel()
    {
        this.Data = new ObservableCollection<CategoryItem>()
        {
            new CategoryItem { Category = "A" }, 
            new CategoryItem { Category = "B", Value = 70 },
            new CategoryItem { Category = "C", Value = 80 },
            new CategoryItem { Category = "D", Value = 50 },
            new CategoryItem { Category = "E", Value = 40 },
            new CategoryItem { Category = "F" },
            new CategoryItem { Category = "G" },
            new CategoryItem { Category = "H", Value = 30 },
            new CategoryItem { Category = "I", Value = 60 },
            new CategoryItem { Category = "J", Value = 80 },
            new CategoryItem { Category = "K", Value = 85 },
            new CategoryItem { Category = "L", Value = 90 }
        };
    }

    public ObservableCollection<CategoryItem> Data { get; private set; }
}

public class CategoryItem
{
    public string Category { get; set; }
    public double? Value { get; set; }
}

2. Add a RadCartesianChart with a Spline Area Series, for example:

• XAML

<telerik:RadCartesianChart>
    <telerik:RadCartesianChart.BindingContext>
        <local:ViewModel />
    </telerik:RadCartesianChart.BindingContext>
    <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:CategoricalAxis />
    </telerik:RadCartesianChart.HorizontalAxis>
    <telerik:RadCartesianChart.VerticalAxis>
        <telerik:NumericalAxis Minimum="0" Maximum="100" />
    </telerik:RadCartesianChart.VerticalAxis>
    <telerik:RadCartesianChart.Series>
        <telerik:SplineAreaSeries ValueBinding="Value"
                                  CategoryBinding="Category"
                                  ItemsSource="{Binding Data}" />
    </telerik:RadCartesianChart.Series>
</telerik:RadCartesianChart>

3. Add the telerik namespace:

• XAML

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" 

The image below shows how the null data points are visualized as gaps.