How to create a dotted forecast line chart in .NET MAUI Chart?

The .NET MAUI Cartesian Chart is used for forecasting, providing predictions or estimates of future values based on data and statistical models. By analyzing past data, forecasts offer valuable insights for decision-making and planning.

To create a forecast chart, you can follow these steps:

Step 1: Initialize the chart using this document.

Step 2: Add a dotted forecast line in your application by using the StrokeDashArray property. This property is a double array property that can be set using a resource and then bound to a key.

XAML

<chart:SfCartesianChart>
   <chart:SfCartesianChart.Resources>
       <DoubleCollection x:Key="dashArray">
           <x:Double>3</x:Double>
           <x:Double>2</x:Double>
       </DoubleCollection>
   </chart:SfCartesianChart.Resources>
   
   <chart:SplineSeries ItemsSource="{Binding Data}" XBindingPath="Year" YBindingPath="Sales"/>
   <chart:SplineSeries ItemsSource="{Binding Data}" XBindingPath="Year" YBindingPath="ForeCast" StrokeDashArray="{StaticResource dashArray}"/>
</chart:SfCartesianChart>

C#

SfCartesianChart chart = new SfCartesianChart();

DoubleCollection doubleCollection = new DoubleCollection();
doubleCollection.Add(3);
doubleCollection.Add(2);

SplineSeries series = new SplineSeries()
{
   ItemsSource = new ViewModel().Data,
   XBindingPath = "Year",
   YBindingPath = "Sales"

};

SplineSeries series2 = new SplineSeries()
{
   ItemsSource = new ViewModel().Data,
   XBindingPath = "Year",
   YBindingPath = "ForeCast",
   StrokeDashArray = doubleCollection
};

chart.Series.Add(series);
chart.Series.Add(series2);

this.Content = chart;

Model

   public class ChartData
   {
       public string Year { get; set; }
       public double? Sales { get; set; }
       public double? ForeCast { get; set; }

   }

ViewModel

public class ViewModel
   {
       public ObservableCollection<ChartData> Data { get; set; }
       public ObservableCollection<Brush> CustomColor { get; set; }

       public ViewModel()
       {

           Data = new ObservableCollection<ChartData>()
           {
           new ChartData(){Year="2010",Sales = 3200},
           new ChartData(){ Year="2011",Sales = 2000},
           new ChartData(){ Year="2012",Sales = 4500},
           new ChartData(){ Year="2013",Sales = 6000},
           new ChartData(){ Year="2014",Sales = 5500},
           new ChartData(){ Year="2015",Sales = 4600,ForeCast = 4600},
           new ChartData(){ Year="2016",ForeCast = 4500},
           new ChartData(){ Year="2017",ForeCast = 5500},
           new ChartData(){ Year="2018",ForeCast = 6000},
           new ChartData(){ Year="2019",ForeCast = 4800},
           new ChartData(){ Year="2020",ForeCast = 5000},
           new ChartData(){ Year="2021",ForeCast = 6500},
           };

           CustomColor = new ObservableCollection<Brush>()
           {
               new SolidColorBrush(Color.FromArgb("#ff944d")),
               new SolidColorBrush(Color.FromArgb("#33bbff"))
           };
       }
   }

Download the complete sample from GitHub.

Conclusion
I hope you enjoyed learning how to create a dotted forecast line chart in .NET MAUI Cartesian Chart.

You can refer to our .NET MAUI Cartesian Chart feature tour page to learn about its other groundbreaking feature representations. Explore our .NET MAUI Cartesian Chart documentation to understand how to present and manipulate data.

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

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