How to add multiple axes in WinUI Chart (SfCartesianChart) ?
The WinUI Cartesian chart provides support to add multiple axes inside the same chart area with the specified x-axis and y-axis. There are two properties XAxisName and YAxisName in all the CartesianSeries types, which are used to provide multiple axes support.
This 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 the 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:DateTimeAxis/> </chart:SfCartesianChart.XAxes > <chart:SfCartesianChart.YAxes > <chart:NumericalAxis/> </chart:SfCartesianChart.YAxes > </chart:SfCartesianChart>
[C#]
SfCartesianChart chart = new SfCartesianChart(); //Initializing XAxes DateTimeAxis xAxis = new DateTimeAxis (); chart.XAxes.Add.(xAxis); //Initializing YAxes NumericalAxis yAxis = new NumericalAxis(); chart.YAxes.Add.(yAxis); this.Content = chart;
Step 4: Create a ViewModel class with a data collection property to 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 5: Populate the chart with multiple axes.
As we are going to visualize the multiple axes in the cartesian chart, add multiple axes to the SfCartesianChart.YAxes property. Then, assign the specified axis name to the independent axis required cartesian series YAxisName property as illustrated below:
[XAML]
<chart:SfCartesianChart> <chart:SfCartesianChart.DataContext> <viewModel:ViewModel/> </chart:SfCartesianChart.DataContext> . . . <chart:SfCartesianChart.XAxes> <chart:DateTimeAxis /> </chart:SfCartesianChart.XAxes> <chart:SfCartesianChart.YAxes> <chart:NumericalAxis x:Name="yAxis1" /> <chart:NumericalAxis x:Name="yAxis2" OpposedPosition="True" /> </chart:SfCartesianChart.YAxes> . . . <chart:SfCartesianChart.Series> <chart:LineSeries /> <chart:SplineSeries YAxisName="yAxis2" /> </chart:SfCartesianChart.Series> . . . </chart:SfCartesianChart>
[C#]
SfCartesianChart chart = new SfCartesianChart();
chart.DataContext = new ViewModel();
. . .
DateTimeAxis xAxis = new DateTimeAxis();
chart.XAxes.Add(xAxis);
NumericalAxis yAxis1 = new NumericalAxis()
{
Name = "yAxis1",
};
NumericalAxis yAxis2 = new NumericalAxis()
{
Name = "yAxis2",
};
chart.YAxes.Add(yAxis1);
chart.YAxes.Add(yAxis2);
LineSeries series1 = new LineSeries();
SplineSeries series2 = new SplineSeries();
series2.YAxisName = "yAxis2";
chart.Series.Add(series1);
chart.Series.Add(series2);
this.Content = chart;
Output
Hope you enjoyed learning about the quick getting started with WinUI Multiple Axes Chart. You can explore the runnable demo from this GitHub location.
