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;

2. Zero

Empty points are replaced with zero, maintaining continuity in the series.

[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;

3. Average

Empty points are replaced with the average value of surrounding data points.

[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;

By default, the EmptyPointMode property is set to None.

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;

By using EmptyPointMode and EmptyPointSettings, you can efficiently manage missing data in .NET MAUI Cartesian Charts, ensuring a smooth, accurate, and visually appealing charting experience.

Troubleshooting

Path too long exception

If you are facing a path too long exception when building this example project, close Visual Studio and rename the repository to a shorter name before building the project.

For more details, refer to the KB on how to handle the empty points gap in .NET MAUI Cartesian Chart