How to create a WinUI Line Chart (SfCartesianChart)?
The WinUI Line Chart represents and visualizes time-dependent data to show trends at equal intervals. This section explains how to create WinUI Line Chart.
The user guide Documentation helps you to acquire more knowledge on charts and their features. You can also refer to the Feature Tour site to get an overview of all the features in a chart.
Step 1: Create a simple project using the instructions given in the Getting Started with your first WinUI app documentation.
Step 2: Add Syncfusion.Chart.WinUI NuGet to the project and import the SfCartesianChart namespace as follows.
[XAML]
xmlns:chart="using:Syncfusion.UI.Xaml.Charts"
[C#]
using Syncfusion.UI.Xaml.Charts;
Step 3: Initialize an empty chart with XAxes and YAxes as shown in the following code sample.
[XAML]
<chart:SfCartesianChart> <chart:SfCartesianChart.XAxes > <chart:CategoryAxis/> </chart:SfCartesianChart.XAxes > <chart:SfCartesianChart.YAxes > <chart:NumericalAxis/> </chart:SfCartesianChart.YAxes > </chart:SfCartesianChart>
[C#]
SfCartesianChart chart = new SfCartesianChart(); //Initializing XAxes CategoryAxis xAxis = new CategoryAxis(); chart.XAxes.Add.(xAxis); //Initializing YAxes NumericalAxis yAxis = new NumericalAxis(); chart.YAxes.Add.(yAxis); this.Content = chart;
Step 4: Initialize a data model that represents a data point for Line Chart.
public class Model
{
public string Year { get; set; }
public double Counts { get; set; }
public Model(string name, double count)
{
Year = name;
Counts = count;
}
}
Step 5: Create a ViewModel class with a Data Collection property using the above model and initialize a list of objects as shown in the following code sample.
public class ViewModel
{
public ObservableCollection<Model> Data { get; set; }
public ViewModel()
{
Data = new ObservableCollection<Model>()
{
new Model("1925", 415),
new Model("1926", 408),
new Model("1927", 415),
new Model("1928", 350),
new Model("1929", 375),
new Model("1930", 500),
new Model("1931", 390),
new Model("1932", 450),
};
}
}
Step 6: Set the ViewModel instance as the DataContext of your window; this is done to bind properties of ViewModel to the chart.
Add namespace of ViewModel class to your XAML page, if you prefer to set DataContext in XAML.
[XAML]
xmlns:viewModel="using:CartesianChartDesktop" . . . <chart:SfCartesianChart> <chart:SfCartesianChart.DataContext> <viewModel:ViewModel/> </chart:SfCartesianChart.DataContext> </chart:SfCartesianChart>
[C#]
SfCartesianChart chart = new SfCartesianChart(); chart.DataContext = new ViewModel();
Step 7: Populate the chart with data.
As we are going to visualize the comparison of annual rainfall in the data model, add LineSeries to SfCartesianChart.Series property, and then bind the Data property of the above ViewModel to the LineSeries ItemsSource property as shown in the following code sample.
Need to set XBindingPath and YBindingPath properties so that series will fetch values from the respective properties in the data model to plot the series.
[XAML]
<chart:SfCartesianChart>
<chart:SfCartesianChart.DataContext>
<viewModel:ViewModel/>
</chart:SfCartesianChart.DataContext>
. . .
<chart:SfCartesianChart.Series>
<chart:LineSeries ItemsSource="{Binding Data}"
XBindingPath="Year"
YBindingPath="Counts"
ShowDataLabels="True" >
</chart:LineSeries>
</chart:SfCartesianChart.Series>
</chart:SfCartesianChart>
[C#]
SfCartesianChart chart = new SfCartesianChart();
chart.DataContext = new ViewModel();
. . .
LineSeries series = new LineSeries();
series.SetBinding(LineSeries.ItemsSourceProperty, new Binding() { Path = new PropertyPath("Data") });
series.XBindingPath = " Year";
series.YBindingPath = " Counts";
series.ShowDataLabels = true;
chart.Series.Add(series);
this.Content = chart;
Output
Hope you enjoyed learning about the quick getting started with WinUI Line Charts. Can explore the runnable demo from this GitHub location.
Conclusion
I hope you enjoyed how to create a WinUI Line Chart (SfCartesianChart).
You can refer to our WinUI line 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 WinUI Line 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, Direct-Trac, or feedback portal. We are always happy to assist you!
