How to fill an empty points with dotted lines in .NET MAUI Cartesian Charts?

This article explains how to fill the empty area with dotted lines in the .NET MAUI Cartesian Charts.

To demonstrate this, consider the two stacking area series. If it is a populated data with a NaN or null, then it will be plotted as shown in the following image.

In order to fill this empty space with dotted lines, use LineSeries with calculated data from two stacking area series’s data collection as shown in the following code sample.

Step 1: To plot the dashed line, use StrokeDashArray property in LineSeries.

XAML

<chart:SfCartesianChart>
   <chart:SfCartesianChart.Resources>
       <DoubleCollection x:Key="dashArray">
           <x:Double>5</x:Double>
           <x:Double>6</x:Double>
       </DoubleCollection>
   </chart:SfCartesianChart.Resources>
   
   <chart:StackingAreaSeries ItemsSource="{Binding Data1}"
                             XBindingPath="Date"
                             YBindingPath="Value"
                             Fill="#0090AF"/>
   <chart:StackingAreaSeries ItemsSource="{Binding Data2}"
                             XBindingPath="Date"
                             YBindingPath="Value"
                             Fill="#8AC114"/>
   <chart:LineSeries ItemsSource="{Binding LineData}"
                     XBindingPath="Date"
                     YBindingPath="Value"
                     Fill="#DB2C33" 
                     StrokeDashArray="{StaticResource dashArray}"/>
                         
</chart:SfCartesianChart>

Step 2: Data1 and Data2 are point collection of stacking area series. Based on that two collection, create a items source for LineSeries.

C#

 public class ViewModel
{
    public ObservableCollection<Model> Data1 { get; set; }
    public ObservableCollection<Model> Data2 { get; set; }
    public ObservableCollection<Model> LineData { get; set; }
    public bool IsEmpty { get; set; }

    public ViewModel() 
    {
        Data1 = new ObservableCollection<Model>();
        Data2 = new ObservableCollection<Model>();
        LineData = new ObservableCollection<Model>();
        var date = new DateTime(2007, 08, 10);
        var random = new Random();
        for (int i = 0; i < 15; i++)
        {
            if (i == 3 || i == 10)
            {
                Data1.Add(new Model(date, double.NaN));
                Data2.Add(new Model(date, double.NaN));
            }
            else
            {
                Data1.Add(new Model(date, random.Next(10, 30)));
                Data2.Add(new Model(date, random.Next(10, 30)));                    
            }

            date= date.AddDays(1);
        }

        for(int i = 0;i < Data1.Count;i++)
        {
            if (double.IsNaN(Data1[i].Value))
            {
                IsEmpty = true;
            }
            else
            {
                IsEmpty = false;
            }

            if(IsEmpty)
            {
                if (!double.IsNaN(Data1[i-1].Value))
                {
                    LineData.Add(new Model(Data1[i - 1].Date, 0));
                    LineData.Add(new Model(Data1[i - 1].Date, Data1[i-1].Value + Data2[i-1].Value));
                }
                if (!double.IsNaN(Data1[i+1].Value))
                {
                    LineData.Add(new Model(Data1[i + 1].Date, Data1[i+1].Value + Data2[i+1].Value));
                    LineData.Add(new Model(Data1[i + 1].Date, 0));
                    LineData.Add(new Model(Data1[i + 1].Date, double.NaN));
                }
            }
        }
    }
 }

Output

For better understanding, please refer to Github sample.

Conclusion

I hope you enjoyed learning about how to fill an empty area with dotted lines in .NET MAUI Chart (SfCartesianChart).

You can refer to our .NET MAUI Chart’s feature tour page to know 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, you can check out our .NET MAUI from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our .NET MAUI Chart and other .NET MAUI components.

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