How to Group Stacking Series in .NET MAUI Chart?
This article explains how to group the stacking series in .NET MAUI Cartesian Chart
A stacked chart is a type of graph that displays multiple data series on top of one another, allowing you to see the total and individual contributions of each series to the whole. The .NET MAUI Cartesian Chart provide support to cluster the stacking series using the GroupingLabel property.
Consider a scenario with four stacking column series grouped into two entities, namely GroupOne and GroupTwo, distinguished by the GroupingLabel property. In the resulting chart, two stacking columns are rendered at a specific point— one representing GroupOne and the other representing GroupTwo. Specifically, TeamA and TeamB are associated with GroupOne, while TeamC and TeamD are affiliated with GroupTwo.
XAML
<chart:SfCartesianChart>
...
<chart:StackingColumnSeries ItemsSource="{Binding Data1}"
XBindingPath="Month"
YBindingPath="Value"
Label="Team A"
GroupingLabel="GroupOne">
</chart:StackingColumnSeries>
<chart:StackingColumnSeries ItemsSource="{Binding Data2}"
XBindingPath="Month"
YBindingPath="Value"
Label="Team B"
GroupingLabel="GroupOne">
</chart:StackingColumnSeries>
<chart:StackingColumnSeries ItemsSource="{Binding Data3}"
XBindingPath="Month"
Label="Team C"
GroupingLabel="GroupTwo">
</chart:StackingColumnSeries>
<chart:StackingColumnSeries ItemsSource="{Binding Data4}"
XBindingPath="Month"
YBindingPath="Value"
Label="Team D"
GroupingLabel="GroupTwo">
</chart:StackingColumnSeries>
...
</chart:SfCartesianChart>
C#
SfCartesianChart chart = new SfCartesianChart();
...
var teamASeries = new StackingColumnSeries
{
ItemsSource = "{Binding Data1}",
XBindingPath = "Month",
YBindingPath = "Value",
Label="Team A",
GroupingLabel="GroupOne"
};
var teamBSeries = new StackingColumnSeries
{
ItemsSource = "{Binding Data2}",
XBindingPath = "Month",
YBindingPath = "Value",
Label="Team B",
GroupingLabel="GroupOne"
};
var teamCSeries = new StackingColumnSeries
{
ItemsSource = "{Binding Data3}",
XBindingPath = "Month",
YBindingPath = "Value",
Label="Team C",
GroupingLabel="GroupTwo"
};
var teamDSeries = new StackingColumnSeries
{
ItemsSource = "{Binding Data4}",
XBindingPath = "Month",
YBindingPath = "Value",
Label="Team D",
GroupingLabel="GroupTwo"
};
chart.Series.Add(teamASeries);
chart.Series.Add(teamBSeries);
chart.Series.Add(teamCSeries);
chart.Series.Add(teamDSeries);
this.Content=chart;
Output
Before Grouping the series
After Grouping the series
For a better understanding, please refer to the GitHub sample.
Conclusion
I hope you enjoyed learning about How to group stacking series in .NET MAUI Cartesian Chart.
You can refer to our .NET MAUI Chart’s feature tour page to know about its other groundbreaking feature representations. You can also explore our .NET MAUI Chart documentation to understand how to present and manipulate data.
For current customers, you can check out our .NET MAUI from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our .NET MAUI Chart and other .NET MAUI components.
If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!