Syncfusion Feedback


.NET MAUI Cartesian Charts Stacked Column 100 Chart

Overview

The .NET MAUI 100% stacked column chart displays multiple series of data as stacked columns, ensuring that the cumulative proportion of each stacked element always totals 100%. The y-axis will always render within the range 0–100. You can create beautiful, animated, real-time, and high-performance 100% stacked column charts that also support interactive features such as zooming and panning, trackball, tooltips, and selection.

.NET MAUI 100% stacked column chart documentation

.NET MAUI 100% stacked column chart.

Key features

.NET MAUI 100% stacked column chart with grouping support

Stacking group

Group a series with another series using the group name in a chart. Group the series with different stacking names separately.

.NET MAUI 100% stacked column chart with rounded corners

Rounded corners

Modernize the UI by applying rounded corners to the .NET MAUI 100% stacked column chart.

.NET MAUI 100% stacked column chart with space and width customization

Spacing and width

The .NET MAUI 100% stacked column chart provides an option to customize the spacing between two rectangles, which increases or decreases the width of the column.

Code example

Easily get started with 100% stacked column chart using a few simple lines of XAML and C# code, as demonstrated below.

  1. <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" 
  2.         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  3.         x:Class="ChartExample.MainPage"
  4.         xmlns:local="using:ChartExample"
  5.         xmlns:chart="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts">
  6.        
  7.     <Grid>
  8.         <chart:SfCartesianChart HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
  9.             <!--Setting BindingContext-->
  10.             <chart:SfCartesianChart.BindingContext>
  11.                 <local:ViewModel/>
  12.             </chart:SfCartesianChart.BindingContext>
  13.  
  14.             <!--Initialize the horizontal axis for the .NET MAUI Cartesian Chart.-->
  15.             <chart:SfCartesianChart.XAxes>
  16.                 <chart:CategoryAxis/>
  17.             </chart:SfCartesianChart.XAxes>
  18.  
  19.             <!--Initialize the vertical axis for the .NET MAUI Cartesian Chart.-->
  20.             <chart:SfCartesianChart.YAxes>
  21.                 <chart:NumericalAxis/>
  22.             </chart:SfCartesianChart.YAxes>
  23.            
  24.             <!--Adding 100% Stacked column series to the .NET MAUI Cartesian Chart.-->
  25.             <chart:SfCartesianChart.Series>
  26.                 <chart:StackingColumn100Series 
  27.                             ItemsSource="{Binding Data}"
  28.                             XBindingPath="Month"
  29.                             YBindingPath="Target">
  30.                 </chart:StackingColumn100Series>
  31.                 <chart:StackingColumn100Series 
  32.                             ItemsSource="{Binding Data}"
  33.                             XBindingPath="Month"
  34.                             YBindingPath="High">
  35.                 </chart:StackingColumn100Series>
  36.                 <chart:StackingColumn100Series 
  37.                             ItemsSource="{Binding Data}"
  38.                             XBindingPath="Month"
  39.                             YBindingPath="Low">
  40.                 </chart:StackingColumn100Series>
  41.             </chart:SfCartesianChart.Series>
  42.         </chart:SfCartesianChart>
  43.     </Grid>
  44. </ContentPage>
  1. public class Model
  2. {
  3.     public string Month { get; set; } 
  4.     public double Target { get; set; }
  5.     public double High { get; set; }
  6.     public double Low { get; set; }
  7.  
  8.     public Model(string xValue, double yValue, double high, double low)
  9.     {
  10.         Month = xValue;
  11.         Target = yValue;
  12.         High = high;
  13.         Low = low;
  14.     }
  15. }
  16. public class ViewModel
  17. {
  18.     public ObservableCollection<Model> Data { get; set; }
  19.     public ViewModel()
  20.     {
  21.         Data = new ObservableCollection<Model>()
  22.         {
  23.             new Model("2010", 100,90,60),
  24.             new Model("2011", 120,100,80),
  25.             new Model("2012", 140,120,90),
  26.             new Model("2013", 160,140,100),
  27.         };
  28.     }
  29. }

Learning resources

Navigate to GitHub code used to configure the .NET MAUI 100% stacked column chart

GitHub Code

The .NET MAUI 100% stacked column chart configuration code is available on GitHub.

Navigate to the options available in the user guide to customize the .NET MAUI 100% stacked column chart

.NET MAUI 100% stacked column chart user guide

Learn about all the options available to customize the .NET MAUI 100% stacked column chart.

Navigate to the API reference documentation of .NET MAUI 100% stacked column chart

.NET MAUI 100% stacked column chart API reference

Explore the .NET MAUI 100% stacked column chart APIs.

Scroll up icon
Chat with us