Articles in this section
Category / Section

How to create a dotted line in WinUI Chart (SfCartesianChart)?

3 mins read

This section explains how to create dotted line charts using Syncfusion® WinUI cartesian charts.

In WinUI Cartesian Chart, you can create a line chart with a dashed appearance by utilizing the StrokeDashArray property of the LineSeries. The example below demonstrates how to implement this:

If you are new to our control, refer to this KB documentation, which helps you to create a WinUI line chart.

[XAML]

 
<chart:SfCartesianChart>
    <chart:SfCartesianChart.DataContext>
            <local:ViewModel/>
    </chart:SfCartesianChart.DataContext>
 
    <chart:SfCartesianChart.XAxes>
            <chart:CategoryAxis/>
    </chart:SfCartesianChart.XAxes>
 
    <chart:SfCartesianChart.YAxes>
           <chart:NumericalAxis/>
    </chart:SfCartesianChart.YAxes>
 
    <chart:LineSeries XBindingPath="Year"
                                    YBindingPath="Counts"
                                    ItemsSource="{Binding Data}"
                                    ShowDataLabels="True">
      <chart:LineSeries.StrokeDashArray>
                    <DoubleCollection>
                        <x:Double>3</x:Double>
                        <x:Double>3</x:Double>
                    </DoubleCollection>
      </chart:LineSeries.StrokeDashArray>
    </chart:LineSeries>
</chart:SfCartesianChart>
 

 

[C#]

 
var chart = new SfCartesianChart();
ViewModel viewModel = new ViewModel();
 
// Initializing X-Axes.
var xAxis = new CategoryAxis();
chart.XAxes.Add(xAxis);
 
// Initializing Y-Axes.
var yAxis = new NumericalAxis();
chart.YAxes.Add(yAxis);
 
// Initializing stroke dash array for line series.
var strokeDashArray = new DoubleCollection() { 3, 3 };
 
var series = new LineSeries()
{
              ItemsSource = viewModel.Data,
              XBindingPath = "Year",
              YBindingPath = "Counts",
              ShowDataLabels = true,
              StrokeDashArray = strokeDashArray,
};
 
chart.Series.Add(series);
 

Output

Dotted line chart in WinUI

 For a detailed view, explore the sample on GitHub.


Conclusion

I hope you enjoyed learning about how to create a dotted line in WinUI Chart (SfCartesianChart).

You can refer to our WinUI Charts’s feature tour page to know about its other groundbreaking feature representations. You can also explore our WinUI Charts documentation to understand how to present and manipulate data. 

For current customers, you can check out our WinUI 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 WinUI Charts and other WinUI 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!

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied