Skip to content

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.

Notifications You must be signed in to change notification settings

SyncfusionExamples/How-to-group-stacking-series-in-.NET-MAUI-Chart-SfCartesianChart

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 

Repository files navigation

How to group stacking series in .NET MAUI SfCartesianChart

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

Before.png

After Grouping the series

After.png

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.

About

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.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  

Languages