How to create a WinUI Spline Chart (SfCartesianChart)?
The WinUI Spline Chart is similar to a line chart. However, instead of connecting data points with straight lines, the data points are connected by smooth Bezier curves. This guide explains how to create a WinUI Spline Chart.
The user guide Documentation can help you acquire more knowledge about charts and their features. You can also refer to the Feature Tour site for an overview of all chart features.
Steps to Create a WinUI Spline Chart:
Step 1: Create a simple project using the instructions 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 the XAxes and YAxes as shown in the following code snippet.
[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 a Spline 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 allows you to bind properties of the ViewModel to the chart.
Add the namespace of the ViewModel class to your XAML page, if you prefer to set the DataContext in XAML.
[XAML]
xmlns:viewModel="using:WinUI_SplineChart" . . . <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 the data.
To visualize the comparison of annual rainfall in the data model, add SplineSeries to SfCartesianChart.Series property, and bind the Data property of the ViewModel to the SplineSeries ItemsSource property as shown in the following code.
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:SplineSeries ItemsSource="{Binding Data}"
XBindingPath="Year"
YBindingPath="Counts">
</chart:SplineSeries>
</chart:SfCartesianChart.Series>
</chart:SfCartesianChart>
[C#]
SfCartesianChart chart = new SfCartesianChart();
chart.DataContext = new ViewModel();
. . .
SplineSeries series = new SplineSeries();
series.SetBinding(SplineSeries.ItemsSourceProperty, new Binding() { Path = new PropertyPath("Data") });
series.XBindingPath = " Year";
series.YBindingPath = " Counts";
chart.Series.Add(series);
this.Content = chart;
Output
For a detailed view, explore the sample on GitHub.
Conclusion
I hope you enjoyed learning about how to create a WinUI Spline Chart (SfCartesianChart).
You can refer to our WinUI Chart’s feature tour page to know about its other groundbreaking feature representations. You can also explore our WinUI Chart 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 Chart 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!
