How To Bind A Complex Property To The .NET MAUI Chart Sfcartesianchart

charting
charts
datavisualization
dataviz
dotnet
maui
This sample demonstrate how to bind a complex property in.NET MAUI Chart (SfCartesianChart) The .NET MAUI Chart provides support for binding the complex property in Cartesian chart. The complex property binding feature enables you to access nested object reference property values to render the chart segment. This article explains how to bind the complex property 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
See Also
How to bind array collection to .NET MAUI ChartS (SfCartesianChart)
How to bind the SQLite Database to the .NET MAUI Chart (SfCartesianChart)
