Skip to content

Commit 80ac3ff

Browse files
SaiyathAliFathimaSaiyathAliFathima
authored
Merge pull request #4 from SyncfusionExamples/modify_sample
Modify the KB sample version .net 9 and nuget as Toolkit Charts
2 parents 53c17e7 + a758ca7 commit 80ac3ff

39 files changed

+1230
-2
lines changed

‎README.md‎

Lines changed: 113 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,113 @@
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-toolkit/Syncfusion.Maui.Toolkit.Charts.StackingSeriesBase.html#Syncfusion_Maui_Toolkit_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-toolkit/Syncfusion.Maui.Toolkit.Charts.StackingSeriesBase.html#Syncfusion_Maui_Toolkit_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)
108+
109+
### Troubleshooting
110+
**Path too long exception**
111+
If you are facing a path too long exception when building this example project, close Visual Studio and rename the repository to a shorter name before building the project.
112+
113+
For more details, refer to the KB on [how to group stacking series in .NET MAUI SfCartesianChart](https://support.syncfusion.com/kb/article/14906/how-to-group-stacking-series-in-net-maui-chart-sfcartesianchart-).

‎StackedColumnGrouping/StackedColumnGrouping.sln‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
2+
Microsoft Visual Studio Solution File, Format Version 12.00
3+
# Visual Studio Version 17
4+
VisualStudioVersion = 17.9.34321.82
5+
MinimumVisualStudioVersion = 10.0.40219.1
6+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "StackedColumnGrouping", "StackedColumnGrouping\StackedColumnGrouping.csproj", "{00D8029F-7B80-480C-BC96-E0DF0B933F72}"
7+
EndProject
8+
Global
9+
GlobalSection(SolutionConfigurationPlatforms) = preSolution
10+
Debug|Any CPU = Debug|Any CPU
11+
Release|Any CPU = Release|Any CPU
12+
EndGlobalSection
13+
GlobalSection(ProjectConfigurationPlatforms) = postSolution
14+
{00D8029F-7B80-480C-BC96-E0DF0B933F72}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15+
{00D8029F-7B80-480C-BC96-E0DF0B933F72}.Debug|Any CPU.Build.0 = Debug|Any CPU
16+
{00D8029F-7B80-480C-BC96-E0DF0B933F72}.Debug|Any CPU.Deploy.0 = Debug|Any CPU
17+
{00D8029F-7B80-480C-BC96-E0DF0B933F72}.Release|Any CPU.ActiveCfg = Release|Any CPU
18+
{00D8029F-7B80-480C-BC96-E0DF0B933F72}.Release|Any CPU.Build.0 = Release|Any CPU
19+
{00D8029F-7B80-480C-BC96-E0DF0B933F72}.Release|Any CPU.Deploy.0 = Release|Any CPU
20+
EndGlobalSection
21+
GlobalSection(SolutionProperties) = preSolution
22+
HideSolutionNode = FALSE
23+
EndGlobalSection
24+
GlobalSection(ExtensibilityGlobals) = postSolution
25+
SolutionGuid = {56707A11-869E-49E9-84C2-5C14E611480B}
26+
EndGlobalSection
27+
EndGlobal

‎StackedColumnGrouping/StackedColumnGrouping/App.xaml‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<?xml version = "1.0" encoding = "UTF-8" ?>
2+
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4+
xmlns:local="clr-namespace:StackedColumnGrouping"
5+
x:Class="StackedColumnGrouping.App">
6+
<Application.Resources>
7+
<ResourceDictionary>
8+
<ResourceDictionary.MergedDictionaries>
9+
<ResourceDictionary Source="Resources/Styles/Colors.xaml" />
10+
<ResourceDictionary Source="Resources/Styles/Styles.xaml" />
11+
</ResourceDictionary.MergedDictionaries>
12+
</ResourceDictionary>
13+
</Application.Resources>
14+
</Application>

‎StackedColumnGrouping/StackedColumnGrouping/App.xaml.cs‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
namespace StackedColumnGrouping
2+
{
3+
public partial class App : Application
4+
{
5+
public App()
6+
{
7+
InitializeComponent();
8+
9+
MainPage = new AppShell();
10+
}
11+
}
12+
}

‎StackedColumnGrouping/StackedColumnGrouping/AppShell.xaml‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<?xml version="1.0" encoding="UTF-8" ?>
2+
<Shell
3+
x:Class="StackedColumnGrouping.AppShell"
4+
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
5+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
6+
xmlns:local="clr-namespace:StackedColumnGrouping"
7+
Shell.FlyoutBehavior="Disabled"
8+
Title="StackedColumnGrouping">
9+
10+
<ShellContent
11+
ContentTemplate="{DataTemplate local:MainPage}"
12+
Route="MainPage" />
13+
14+
</Shell>

‎StackedColumnGrouping/StackedColumnGrouping/AppShell.xaml.cs‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
namespace StackedColumnGrouping
2+
{
3+
public partial class AppShell : Shell
4+
{
5+
public AppShell()
6+
{
7+
InitializeComponent();
8+
}
9+
}
10+
}

‎StackedColumnGrouping/StackedColumnGrouping/MainPage.xaml‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<?xml version="1.0" encoding="utf-8" ?>
2+
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4+
xmlns:chart="clr-namespace:Syncfusion.Maui.Toolkit.Charts;assembly=Syncfusion.Maui.Toolkit"
5+
xmlns:local="clr-namespace:StackedColumnGrouping"
6+
x:Class="StackedColumnGrouping.MainPage">
7+
<ContentPage.BindingContext>
8+
<local:ViewModel></local:ViewModel>
9+
</ContentPage.BindingContext>
10+
11+
<chart:SfCartesianChart Margin="20">
12+
<chart:SfCartesianChart.XAxes>
13+
<chart:CategoryAxis ShowMajorGridLines="False"></chart:CategoryAxis>
14+
</chart:SfCartesianChart.XAxes>
15+
16+
<chart:SfCartesianChart.YAxes>
17+
<chart:NumericalAxis Interval="10" ShowMajorGridLines="False"></chart:NumericalAxis>
18+
</chart:SfCartesianChart.YAxes>
19+
20+
<chart:StackingColumnSeries ItemsSource="{Binding Data1}"
21+
XBindingPath="Month"
22+
YBindingPath="Value"
23+
Fill="#008FFB"
24+
Label="Team A"
25+
GroupingLabel="GroupOne"
26+
LegendIcon="Rectangle">
27+
</chart:StackingColumnSeries>
28+
29+
<chart:StackingColumnSeries ItemsSource="{Binding Data2}"
30+
XBindingPath="Month"
31+
YBindingPath="Value"
32+
Fill="#40ACFF"
33+
Label="Team B"
34+
GroupingLabel="GroupOne"
35+
LegendIcon="Rectangle">
36+
</chart:StackingColumnSeries>
37+
38+
<chart:StackingColumnSeries ItemsSource="{Binding Data3}"
39+
XBindingPath="Month"
40+
YBindingPath="Value"
41+
Fill="#E3465D"
42+
Label="Team C"
43+
GroupingLabel="GroupTwo"
44+
LegendIcon="Rectangle">
45+
</chart:StackingColumnSeries>
46+
47+
<chart:StackingColumnSeries ItemsSource="{Binding Data4}"
48+
XBindingPath="Month"
49+
YBindingPath="Value"
50+
Label="Team D"
51+
Fill="#F25D72"
52+
GroupingLabel="GroupTwo"
53+
LegendIcon="Rectangle">
54+
</chart:StackingColumnSeries>
55+
56+
<chart:SfCartesianChart.Legend>
57+
<chart:ChartLegend ></chart:ChartLegend>
58+
</chart:SfCartesianChart.Legend>
59+
</chart:SfCartesianChart>
60+
61+
</ContentPage>

‎StackedColumnGrouping/StackedColumnGrouping/MainPage.xaml.cs‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
namespace StackedColumnGrouping
2+
{
3+
public partial class MainPage : ContentPage
4+
{
5+
public MainPage()
6+
{
7+
InitializeComponent();
8+
}
9+
}
10+
}

‎StackedColumnGrouping/StackedColumnGrouping/MauiProgram.cs‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
using Microsoft.Extensions.Logging;
2+
using Syncfusion.Maui.Toolkit.Hosting;
3+
4+
namespace StackedColumnGrouping
5+
{
6+
public static class MauiProgram
7+
{
8+
public static MauiApp CreateMauiApp()
9+
{
10+
var builder = MauiApp.CreateBuilder();
11+
builder
12+
.UseMauiApp<App>()
13+
.ConfigureSyncfusionToolkit()
14+
.ConfigureFonts(fonts =>
15+
{
16+
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
17+
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
18+
});
19+
20+
#if DEBUG
21+
builder.Logging.AddDebug();
22+
#endif
23+
24+
return builder.Build();
25+
}
26+
}
27+
}

‎StackedColumnGrouping/StackedColumnGrouping/Model.cs‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Text;
5+
using System.Threading.Tasks;
6+
7+
namespace StackedColumnGrouping
8+
{
9+
public class Model()
10+
{
11+
public string? Month { get; set; }
12+
public double Value { get; set; }
13+
}
14+
}

0 commit comments

Comments
 (0)