How to bind a complex property to the .NET MAUI Chart (SfCartesianChart)?
The .NET MAUI Chart supports binding complex properties in a Cartesian chart. This feature allows you to access nested object reference properties to render the chart segments. This article explains how to bind complex properties in the SfCartesianChart, as shown in the following code example.
Xaml
<ContentPage.BindingContext>
<local:ViewModel/>
</ContentPage.BindingContext>
<chart:SfCartesianChart>
<chart:SfCartesianChart.XAxes>
<chart:CategoryAxis>
<chart:CategoryAxis.Title>
<chart:ChartAxisTitle
FontAttributes="Bold" Text="Month" />
</chart:CategoryAxis.Title>
</chart:CategoryAxis>
</chart:SfCartesianChart.XAxes>
<chart:SfCartesianChart.YAxes>
<chart:NumericalAxis Minimum="0" Maximum="100" >
<chart:NumericalAxis.Title>
<chart:ChartAxisTitle
FontAttributes="Bold" Text="Percentage" />
</chart:NumericalAxis.Title>
</chart:NumericalAxis>
</chart:SfCartesianChart.YAxes>
<chart:SfCartesianChart.Legend>
<chart:ChartLegend/>
</chart:SfCartesianChart.Legend>
<chart:LineSeries ItemsSource="{Binding Data}"
XBindingPath="Month"
YBindingPath="SalesAndExpenseObject.ProfitDetailsObject.ProfitPercentage"
Label="Profit" ShowDataLabels="True" />
<chart:LineSeries ItemsSource="{Binding Data}"
XBindingPath="Month"
YBindingPath="SalesAndExpenseObject.SalesRate[0]"
Label="Sales" ShowDataLabels="True" />
<chart:LineSeries ItemsSource="{Binding Data}"
XBindingPath="Month"
YBindingPath="SalesAndExpenseObject.ExpenseRate"
Label="Expenditure"
ShowDataLabels="True" />
</chart:SfCartesianChart>
C#
SfCartesianChart chart = new SfCartesianChart();
chart.BindingContext = new ViewModel();
CategoryAxis primaryAxis = new CategoryAxis()
{
Title = new ChartAxisTitle()
{
Text = "Month",
FontAttributes = FontAttributes.Bold,
},
};
chart.XAxes.Add(primaryAxis);
NumericalAxis secondaryAxis = new NumericalAxis()
{
Title = new ChartAxisTitle()
{
Text = "Percentage",
FontAttributes = FontAttributes.Bold,
},
Minimum = 0,
Maximum = 100,
};
chart.YAxes.Add(secondaryAxis);
ChartLegend chartLegend = new ChartLegend();
chart.Legend = chartLegend;
LineSeries seriesOne = new LineSeries()
{
XBindingPath = "Month",
YBindingPath = "SalesAndExpenseObject.ProfitDetailsObject.ProfitPercentage",
ItemsSource = (new ViewModel()).Data,
ShowDataLabels = true,
Label = "Profit",
};
LineSeries seriesTwo = new LineSeries()
{
XBindingPath = "Month",
YBindingPath = "SalesAndExpenseObject.SalesRate[0]",
ItemsSource = (new ViewModel()).Data,
ShowDataLabels = true,
Label = "Sales",
};
LineSeries seriesThree = new LineSeries()
{
XBindingPath = "Month",
YBindingPath = "SalesAndExpenseObject.ExpenseRate",
ItemsSource = (new ViewModel()).Data,
ShowDataLabels = true,
Label = "Expenditure",
};
chart.Series.Add(seriesOne);
chart.Series.Add(seriesTwo);
chart.Series.Add(seriesThree);
this.Content = chart;
Output
|
Download the complete sample on GitHub.
Conclusion
I hope you enjoyed learning how to bind complex properties to a .NET MAUI Chart (SfCartesianChart).
You can refer to our .NET MAUI Chart feature tour page to learn about its other groundbreaking feature representations. Explore our .NET MAUI Chart documentation to understand how to present and manipulate data.
For current customers, check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Chart and other .NET MAUI components.
Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
