Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
115 changes: 113 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,2 +1,113 @@
# How-to-group-stacking-series-in-.NET-MAUI-Chart-SfCartesianChart
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.
## How to group stacking series in .NET MAUI SfCartesianChart

This article explains how to group the stacking series in [.NET MAUI Cartesian Chart](https://www.syncfusion.com/maui-controls/maui-cartesian-charts)

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.

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**.


**XAML**

```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#**
```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**

![Before.png](https://support.syncfusion.com/kb/agent/attachment/article/14906/inline?token=eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjE3MjkyIiwib3JnaWQiOiIzIiwiaXNzIjoic3VwcG9ydC5zeW5jZnVzaW9uLmNvbSJ9.ELSzAa4NCiIdr_mS0Bg8T7XVE9y_g-2DbwnQJ0thedE)

**After Grouping the series**

![After.png](https://support.syncfusion.com/kb/agent/attachment/article/14906/inline?token=eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjE3Mjg2Iiwib3JnaWQiOiIzIiwiaXNzIjoic3VwcG9ydC5zeW5jZnVzaW9uLmNvbSJ9._IlGUeutt5mOugHIfa8Rke-BiIgwJ6yRrwR0r27ZNs4)

### Troubleshooting
**Path too long exception**
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.

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-).
27 changes: 27 additions & 0 deletions StackedColumnGrouping/StackedColumnGrouping.sln
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@

Microsoft Visual Studio Solution File, Format Version 12.00
# Visual Studio Version 17
VisualStudioVersion = 17.9.34321.82
MinimumVisualStudioVersion = 10.0.40219.1
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "StackedColumnGrouping", "StackedColumnGrouping\StackedColumnGrouping.csproj", "{00D8029F-7B80-480C-BC96-E0DF0B933F72}"
EndProject
Global
GlobalSection(SolutionConfigurationPlatforms) = preSolution
Debug|Any CPU = Debug|Any CPU
Release|Any CPU = Release|Any CPU
EndGlobalSection
GlobalSection(ProjectConfigurationPlatforms) = postSolution
{00D8029F-7B80-480C-BC96-E0DF0B933F72}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
{00D8029F-7B80-480C-BC96-E0DF0B933F72}.Debug|Any CPU.Build.0 = Debug|Any CPU
{00D8029F-7B80-480C-BC96-E0DF0B933F72}.Debug|Any CPU.Deploy.0 = Debug|Any CPU
{00D8029F-7B80-480C-BC96-E0DF0B933F72}.Release|Any CPU.ActiveCfg = Release|Any CPU
{00D8029F-7B80-480C-BC96-E0DF0B933F72}.Release|Any CPU.Build.0 = Release|Any CPU
{00D8029F-7B80-480C-BC96-E0DF0B933F72}.Release|Any CPU.Deploy.0 = Release|Any CPU
EndGlobalSection
GlobalSection(SolutionProperties) = preSolution
HideSolutionNode = FALSE
EndGlobalSection
GlobalSection(ExtensibilityGlobals) = postSolution
SolutionGuid = {56707A11-869E-49E9-84C2-5C14E611480B}
EndGlobalSection
EndGlobal
14 changes: 14 additions & 0 deletions StackedColumnGrouping/StackedColumnGrouping/App.xaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<?xml version = "1.0" encoding = "UTF-8" ?>
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:StackedColumnGrouping"
x:Class="StackedColumnGrouping.App">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Resources/Styles/Colors.xaml" />
<ResourceDictionary Source="Resources/Styles/Styles.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
12 changes: 12 additions & 0 deletions StackedColumnGrouping/StackedColumnGrouping/App.xaml.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
namespace StackedColumnGrouping
{
public partial class App : Application
{
public App()
{
InitializeComponent();

MainPage = new AppShell();
}
}
}
14 changes: 14 additions & 0 deletions StackedColumnGrouping/StackedColumnGrouping/AppShell.xaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8" ?>
<Shell
x:Class="StackedColumnGrouping.AppShell"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:StackedColumnGrouping"
Shell.FlyoutBehavior="Disabled"
Title="StackedColumnGrouping">

<ShellContent
ContentTemplate="{DataTemplate local:MainPage}"
Route="MainPage" />

</Shell>
10 changes: 10 additions & 0 deletions StackedColumnGrouping/StackedColumnGrouping/AppShell.xaml.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
namespace StackedColumnGrouping
{
public partial class AppShell : Shell
{
public AppShell()
{
InitializeComponent();
}
}
}
61 changes: 61 additions & 0 deletions StackedColumnGrouping/StackedColumnGrouping/MainPage.xaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:chart="clr-namespace:Syncfusion.Maui.Toolkit.Charts;assembly=Syncfusion.Maui.Toolkit"
xmlns:local="clr-namespace:StackedColumnGrouping"
x:Class="StackedColumnGrouping.MainPage">
<ContentPage.BindingContext>
<local:ViewModel></local:ViewModel>
</ContentPage.BindingContext>

<chart:SfCartesianChart Margin="20">
<chart:SfCartesianChart.XAxes>
<chart:CategoryAxis ShowMajorGridLines="False"></chart:CategoryAxis>
</chart:SfCartesianChart.XAxes>

<chart:SfCartesianChart.YAxes>
<chart:NumericalAxis Interval="10" ShowMajorGridLines="False"></chart:NumericalAxis>
</chart:SfCartesianChart.YAxes>

<chart:StackingColumnSeries ItemsSource="{Binding Data1}"
XBindingPath="Month"
YBindingPath="Value"
Fill="#008FFB"
Label="Team A"
GroupingLabel="GroupOne"
LegendIcon="Rectangle">
</chart:StackingColumnSeries>

<chart:StackingColumnSeries ItemsSource="{Binding Data2}"
XBindingPath="Month"
YBindingPath="Value"
Fill="#40ACFF"
Label="Team B"
GroupingLabel="GroupOne"
LegendIcon="Rectangle">
</chart:StackingColumnSeries>

<chart:StackingColumnSeries ItemsSource="{Binding Data3}"
XBindingPath="Month"
YBindingPath="Value"
Fill="#E3465D"
Label="Team C"
GroupingLabel="GroupTwo"
LegendIcon="Rectangle">
</chart:StackingColumnSeries>

<chart:StackingColumnSeries ItemsSource="{Binding Data4}"
XBindingPath="Month"
YBindingPath="Value"
Label="Team D"
Fill="#F25D72"
GroupingLabel="GroupTwo"
LegendIcon="Rectangle">
</chart:StackingColumnSeries>

<chart:SfCartesianChart.Legend>
<chart:ChartLegend ></chart:ChartLegend>
</chart:SfCartesianChart.Legend>
</chart:SfCartesianChart>

</ContentPage>
10 changes: 10 additions & 0 deletions StackedColumnGrouping/StackedColumnGrouping/MainPage.xaml.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
namespace StackedColumnGrouping
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
}
}
}
27 changes: 27 additions & 0 deletions StackedColumnGrouping/StackedColumnGrouping/MauiProgram.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
using Microsoft.Extensions.Logging;
using Syncfusion.Maui.Toolkit.Hosting;

namespace StackedColumnGrouping
{
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.ConfigureSyncfusionToolkit()
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
});

#if DEBUG
builder.Logging.AddDebug();
#endif

return builder.Build();
}
}
}
14 changes: 14 additions & 0 deletions StackedColumnGrouping/StackedColumnGrouping/Model.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace StackedColumnGrouping
{
public class Model()
{
public string? Month { get; set; }
public double Value { get; set; }
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<application android:allowBackup="true" android:icon="@mipmap/appicon" android:roundIcon="@mipmap/appicon_round" android:supportsRtl="true"></application>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
</manifest>
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
using Android.App;
using Android.Content.PM;
using Android.OS;

namespace StackedColumnGrouping
{
[Activity(Theme = "@style/Maui.SplashTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.UiMode | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize | ConfigChanges.Density)]
public class MainActivity : MauiAppCompatActivity
{
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
using Android.App;
using Android.Runtime;

namespace StackedColumnGrouping
{
[Application]
public class MainApplication : MauiApplication
{
public MainApplication(IntPtr handle, JniHandleOwnership ownership)
: base(handle, ownership)
{
}

protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#512BD4</color>
<color name="colorPrimaryDark">#2B0B98</color>
<color name="colorAccent">#2B0B98</color>
</resources>
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
using Foundation;

namespace StackedColumnGrouping
{
[Register("AppDelegate")]
public class AppDelegate : MauiUIApplicationDelegate
{
protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp();
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<!-- See https://aka.ms/maui-publish-app-store#add-entitlements for more information about adding entitlements.-->
<dict>
<!-- App Sandbox must be enabled to distribute a MacCatalyst app through the Mac App Store. -->
<key>com.apple.security.app-sandbox</key>
<true/>
<!-- When App Sandbox is enabled, this value is required to open outgoing network connections. -->
<key>com.apple.security.network.client</key>
<true/>
</dict>
</plist>

Loading