How to handle the empty points gap in .NET MAUI Cartesian Chart?

In .NET MAUI SfCartesianChart, empty points represent missing or null data in a series. These points can occur due to unavailable data, improper formatting, or explicit assignment of null or double.NaN.

This article covers handling empty points using EmptyPointMode to manage missing data and customizing empty points to enhance their visual appearance.

Handling Empty Points Using EmptyPointMode

The EmptyPointMode property determines how missing data points are treated in a series. It offers the following options:

1. None
Empty points are not rendered in the chart, leaving gaps in the series.

[XAML]

<chart:SfCartesianChart>
. . .
    <chart:LineSeries ItemsSource="{Binding ProductSales}"
                      XBindingPath="Product"
                      YBindingPath="Sales"
                      StrokeWidth="2"
                      EmptyPointMode="None"
    </chart:LineSeries>

</chart:SfCartesianChart>

[C#]

SfCartesianChart chart = new SfCartesianChart();
. . .
LineSeries series = new LineSeries()
{
    ItemsSource = new ViewModel().ProductSales,
    XBindingPath = "Product",
    YBindingPath = "Sales",
    StrokeWidth = 2,
    EmptyPointMode = EmptyPointMode.None,
};

chart.Series.Add(series);
this.Content = chart;

[XAML]

<chart:SfCartesianChart>
. . .
    <chart:AreaSeries ItemsSource="{Binding ProductSales}"
                      XBindingPath="Product"
                      YBindingPath="Sales"
                      EmptyPointMode="Zero"/>
</chart:SfCartesianChart>

[C#]

SfCartesianChart chart = new SfCartesianChart();
. . .
AreaSeries series = new AreaSeries()
{
    ItemsSource = new ViewModel().ProductSales,
    XBindingPath = "Product",
    YBindingPath = "Sales",
    EmptyPointMode = EmptyPointMode.Zero,
};
chart.Series.Add(series);
this.Content = chart;

[XAML]

<chart:SfCartesianChart>
. . .
    <chart:ColumnSeries ItemsSource="{Binding ProductSales}"
                        XBindingPath="Product"
                        YBindingPath="Sales"
                        EmptyPointMode="Average"/>
</chart:SfCartesianChart>

[C#]

SfCartesianChart chart = new SfCartesianChart();
. . .
ColumnSeries series = new ColumnSeries()
{
    ItemsSource = new ViewModel().ProductSales,
    XBindingPath = "Product",
    YBindingPath = "Sales",
    EmptyPointMode = EmptyPointMode.Average,
}
chart.Series.Add(series);
this.Content = chart;

Customizing Empty Points

You can modify the appearance of empty points using the EmptyPointSettings property. The following visual properties can be customized:

• Fill: Defines the fill color of empty points.
• Stroke: Specifies the stroke (border) color.
• StrokeWidth: Sets the thickness of the stroke.

The following example demonstrates how to customize empty points:

[XAML]

<chart:SfCartesianChart>
. . .
    <chart:ColumnSeries ItemsSource="{Binding ProductSales}"
                        XBindingPath="Product"
                        YBindingPath="Sales"
                        EmptyPointMode="Average">
        <chart:ColumnSeries.EmptyPointSettings>
            <chart:EmptyPointSettings Fill="LightGrey"/>
        </chart:ColumnSeries.EmptyPointSettings>
    </chart:LineSeries>
</chart:SfCartesianChart>

[C#]

SfCartesianChart chart = new SfCartesianChart();
. . .
ColumnSeries series = new ColumnSeries()
{
    ItemsSource = new ViewModel().ProductSales,
    XBindingPath = "Product",
    YBindingPath = "Sales",
    EmptyPointMode = EmptyPointMode.Average
};

EmptyPointSettings emptypointSettings = new EmptyPointSettings()
{
    Fill = Colors.LightGray,
};

series.EmptyPointSettings = emptypointSettings;
chart.Series.Add(series);
this.Content = chart;

Explore the runnable demo from this GitHub location.

Conclusion

I hope you enjoyed learning how to handle the empty points gap in .NET MAUI Cartesian Chart.

Refer to our .NET MAUI Chart’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our .NET MAUI Chart documentation to understand how to present and manipulate data.

For current customers, check out our .NET MAUI from the License and Downloads page. If you are new to Syncfusion, try our 30-day free trial to check out our .NET MAUI Chart and other .NET MAUI components.

Please let us know in the following comments section if you have any queries or require clarifications. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!