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

WinUI line chart is a visual representation of the data trends at equal intervals by connecting a set of points on a plot with straight lines.

This section explains how to create dotted line charts in WinUI cartesian charts.

WinUI cartesian chart allows you to create a line chart with dashes by using the StrokeDashArray property of LineSeries, as shown in the following code example.

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:SfCartesianChart>

[C#]

var chart = new SfCartesianChart();
ViewModel viewModel = new ViewModel();

// Initializing XAxes
var xAxis = new CategoryAxis();
chart.XAxes.Add(xAxis);

// Initializing YAxes
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:

This user guide Documentation helps you to acquire more knowledge on the WinUI cartesian charts and their features. You can also refer to the Feature Tour site to get an overview of all the features in the chart.

Requirements to run the demo

• Visual Studio 2022
• Windows App SDK 1.1 extension
• .NET 6.0

Troubleshooting

Path too long exception

If you are facing path too long exception when building this example project, close Visual Studio and rename the repository to short and build the project.