Skip to content

Commit afe3351

Browse files
author
Surya Karan Raja
authored
Update README.md
1 parent 3285df1 commit afe3351

File tree

1 file changed

+107
-2
lines changed

1 file changed

+107
-2
lines changed

README.md

Lines changed: 107 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,107 @@
1-
# How-to-group-stacking-series-in-.NET-MAUI-Chart-SfCartesianChart
2-
Explore concise code in this .NET MAUI Chart sample to master grouping techniques for visually compelling and organized stacking series, empowering your data visualization in .NET MAUI applications with SfCartesianChart.
1+
## How to group stacking series in .NET MAUI SfCartesianChart
2+
3+
This article explains how to group the stacking series in [.NET MAUI Cartesian Chart](https://www.syncfusion.com/maui-controls/maui-cartesian-charts)
4+
5+
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](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.StackingSeriesBase.html#Syncfusion_Maui_Charts_StackingSeriesBase_GroupingLabel) property.
6+
7+
Consider a scenario with four stacking column series grouped into two entities, namely **GroupOne** and **GroupTwo**, distinguished by the [GroupingLabel](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.StackingSeriesBase.html#Syncfusion_Maui_Charts_StackingSeriesBase_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**.
8+
9+
10+
**XAML**
11+
12+
```XAML
13+
<chart:SfCartesianChart>
14+
...
15+
<chart:StackingColumnSeries ItemsSource="{Binding Data1}"
16+
XBindingPath="Month"
17+
YBindingPath="Value"
18+
Label="Team A"
19+
GroupingLabel="GroupOne">
20+
</chart:StackingColumnSeries>
21+
22+
<chart:StackingColumnSeries ItemsSource="{Binding Data2}"
23+
XBindingPath="Month"
24+
YBindingPath="Value"
25+
Label="Team B"
26+
GroupingLabel="GroupOne">
27+
</chart:StackingColumnSeries>
28+
29+
<chart:StackingColumnSeries ItemsSource="{Binding Data3}"
30+
XBindingPath="Month"
31+
Label="Team C"
32+
GroupingLabel="GroupTwo">
33+
</chart:StackingColumnSeries>
34+
35+
<chart:StackingColumnSeries ItemsSource="{Binding Data4}"
36+
XBindingPath="Month"
37+
YBindingPath="Value"
38+
Label="Team D"
39+
GroupingLabel="GroupTwo">
40+
</chart:StackingColumnSeries>
41+
...
42+
</chart:SfCartesianChart>
43+
```
44+
45+
46+
47+
**C#**
48+
```C#
49+
50+
SfCartesianChart chart = new SfCartesianChart();
51+
...
52+
53+
var teamASeries = new StackingColumnSeries
54+
{
55+
ItemsSource = "{Binding Data1}",
56+
XBindingPath = "Month",
57+
YBindingPath = "Value",
58+
Label="Team A",
59+
GroupingLabel="GroupOne"
60+
};
61+
62+
var teamBSeries = new StackingColumnSeries
63+
{
64+
ItemsSource = "{Binding Data2}",
65+
XBindingPath = "Month",
66+
YBindingPath = "Value",
67+
Label="Team B",
68+
GroupingLabel="GroupOne"
69+
};
70+
71+
var teamCSeries = new StackingColumnSeries
72+
{
73+
ItemsSource = "{Binding Data3}",
74+
XBindingPath = "Month",
75+
YBindingPath = "Value",
76+
Label="Team C",
77+
GroupingLabel="GroupTwo"
78+
};
79+
80+
var teamDSeries = new StackingColumnSeries
81+
{
82+
ItemsSource = "{Binding Data4}",
83+
XBindingPath = "Month",
84+
YBindingPath = "Value",
85+
Label="Team D",
86+
GroupingLabel="GroupTwo"
87+
};
88+
89+
chart.Series.Add(teamASeries);
90+
chart.Series.Add(teamBSeries);
91+
chart.Series.Add(teamCSeries);
92+
chart.Series.Add(teamDSeries);
93+
94+
this.Content=chart;
95+
96+
```
97+
98+
99+
**Output**
100+
101+
**Before Grouping the series**
102+
103+
![Before.png](https://support.syncfusion.com/kb/agent/attachment/article/14906/inline?token=eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjE3MjkyIiwib3JnaWQiOiIzIiwiaXNzIjoic3VwcG9ydC5zeW5jZnVzaW9uLmNvbSJ9.ELSzAa4NCiIdr_mS0Bg8T7XVE9y_g-2DbwnQJ0thedE)
104+
105+
**After Grouping the series**
106+
107+
![After.png](https://support.syncfusion.com/kb/agent/attachment/article/14906/inline?token=eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjE3Mjg2Iiwib3JnaWQiOiIzIiwiaXNzIjoic3VwcG9ydC5zeW5jZnVzaW9uLmNvbSJ9._IlGUeutt5mOugHIfa8Rke-BiIgwJ6yRrwR0r27ZNs4)

0 commit comments

Comments
 (0)