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

.NET MAUI Cartesian Chart, also known as a forecasting chart, is a prediction or estimation of future values based on data and statistical models. By analyzing past data, forecasts provide 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>

      <chart:SplineSeries  ItemsSource="{Binding Data}"
                           XBindingPath="Year" 
                           YBindingPath="ForeCast"
                           StrokeDashArray="{StaticResource dashArray}">
      </chart:SplineSeries>

</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 here.

Conclusion
I hope you enjoyed learning about 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 know about its other groundbreaking feature representations. You can also explore our .NET MAUI Cartesian Chart documentation to understand how to present and manipulate data.

For current customers, you can check out our .NET MAUI Controls 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 Cartesian Chart and other .NET MAUI controls.

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!