This article explains how to create dotted line in Blazor Chart Component. Creating dotted line chart in Blazor Chart A line chart in Blazor displays information as a series of data points connected by straight-line segments. Blazor Chart provides support to create a dotted line chart using built-in APIs. Dotted and dashed lines can be rendered using the DashArray property in ChartSeries. This property defines the pattern of dashes and gaps used to stroke lines in line type series. The code example below illustrates how to create a dotted line in a Blazor Chart. Idex.razor @using Syncfusion.Blazor.Charts <SfChart Title="Olympic Medals"> <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis> <ChartSeriesCollection> <ChartSeries DataSource="@MedalDetails" XName="X" YName="Y" Width="3" Opacity="0.5" DashArray="5,5" Fill="blue" Type="ChartSeriesType.Line"> </ChartSeries> </ChartSeriesCollection> </SfChart> @code{ public class ChartData { public string X { get; set; } public double Y { get; set; } } public List<ChartData> MedalDetails = new List<ChartData> { new ChartData { X= "South Korea", Y= 39.4 }, new ChartData { X= "India", Y= 61.3 }, new ChartData { X= "Pakistan", Y= 20.4 }, new ChartData { X= "Germany", Y= 65.1 }, new ChartData { X= "Australia", Y= 15.8 }, new ChartData { X= "Italy", Y= 29.2 }, new ChartData { X= "United Kingdom", Y= 44.6 }, new ChartData { X= "Saudi Arabia", Y= 9.7 }, new ChartData { X= "Russia", Y= 40.8 }, new ChartData { X= "Mexico", Y= 31 }, new ChartData { X= "Brazil", Y= 75.9 }, new ChartData { X= "China", Y= 51.4 } }; } The following screenshot illustrates the output of the above code snippet. Output: View the sample in GitHub Conclusion I hope you enjoyed learning how to create dotted line in Blazor Chart Component. You can refer to our Blazor Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor Chart example to understand how to create and manipulate data. For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!
.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!
A line chart in Xamarin.Forms display information as a series of data points which is connected by the straight line segments. Xamarin.Forms Chart provides support to create a dotted line chart using the inbuild APIs. This section explains how to apply the dashed style in the following FastLine and Line Chart series. Dash-Styled FastLine ChartA fast line chart is a special kind of line chart that can render a collection with a huge number of data points. A dotted FastLine chart can be created by using the StrokeDashArray property. StrokeDashArray is a double array property. <syncfusion:FastLineSeries ItemsSource="{Binding Data}" Color="#719daa" StrokeWidth="4" XBindingPath="XValue" YBindingPath="YValue1"> <syncfusion:FastLineSeries.StrokeDashArray> <x:Array Type="{x:Type x:Double}"> <x:Double>3</x:Double> <x:Double>2</x:Double> </x:Array> </syncfusion:FastLineSeries.StrokeDashArray> </syncfusion:FastLineSeries> <syncfusion:FastLineSeries ItemsSource="{Binding Data}" Color="#f25959" StrokeWidth="4" XBindingPath="XValue" YBindingPath="YValue2"> <syncfusion:FastLineSeries.StrokeDashArray> <x:Array Type="{x:Type x:Double}"> <x:Double>1</x:Double> <x:Double>2</x:Double> </x:Array> </syncfusion:FastLineSeries.StrokeDashArray> </syncfusion:FastLineSeries> <syncfusion:FastLineSeries ItemsSource="{Binding Data}" Color="#d8d79b" StrokeWidth="4" XBindingPath="XValue" YBindingPath="YValue3"> <syncfusion:FastLineSeries.StrokeDashArray> <x:Array Type="{x:Type x:Double}"> <x:Double>9</x:Double> <x:Double>1</x:Double> </x:Array> </syncfusion:FastLineSeries.StrokeDashArray> </syncfusion:FastLineSeries> Dash-Styled Line ChartIn the same way, mentioned for the Fast Line chart, you can create a dotted line chart with Line Series as shown in the following code sample using the StrokeDashArray property. <syncfusion:LineSeries ItemsSource="{Binding Data}" Color="#719daa" StrokeWidth="4" XBindingPath="XValue" YBindingPath="YValue1"> <syncfusion:LineSeries.StrokeDashArray> <x:Array Type="{x:Type x:Double}"> <x:Double>3</x:Double> <x:Double>2</x:Double> </x:Array> </syncfusion:LineSeries.StrokeDashArray> </syncfusion:LineSeries> <syncfusion:LineSeries ItemsSource="{Binding Data}" Color="#f25959" StrokeWidth="4" XBindingPath="XValue" YBindingPath="YValue2"> <syncfusion:LineSeries.StrokeDashArray> <x:Array Type="{x:Type x:Double}"> <x:Double>1</x:Double> <x:Double>2</x:Double> </x:Array> </syncfusion:LineSeries.StrokeDashArray> </syncfusion:LineSeries> <syncfusion:LineSeries ItemsSource="{Binding Data}" Color="#d8d79b" StrokeWidth="4" XBindingPath="XValue" YBindingPath="YValue3"> <syncfusion:LineSeries.StrokeDashArray> <x:Array Type="{x:Type x:Double}"> <x:Double>9</x:Double> <x:Double>1</x:Double> </x:Array> </syncfusion:LineSeries.StrokeDashArray> </syncfusion:LineSeries> Output Download the complete sample here. See also What are the different types of axis in Charts How to add multiple series in SfChart How to show the provided information of the data points to the user How to add annotations in SfChart
