Skip to content

SuryaKaran2143/How-to-create-dotted-forecast-linechart-in-.NET-MAUI-Cartesian-chart

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 

Repository files navigation

How to create dotted forecast line in .NET MAUI (SfCartesianChart)

The .NET MAUI Cartesian Chart allows add a dotted forecast line by using the StrokeDashArray property. This property is a double array property that can be set using a resource and then bind to a key.

Initialize a Cartesian chart with the help of this guideline.

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

[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"))
            };

        }
    }

Output

DottedLine

Releases

No releases published

Packages

No packages published

Languages

  • C# 100.0%