How to show cumulative and non-cumulative values on the stacked column charts in .NET MAUI Cartesian Chart?

In Syncfusion .NET MAUI Toolkit, you can create a stacked column chart that displays both cumulative values and non-cumulative values to enhance data visualization. This is achieved using the ShowDataLabels property as true for non-cumulative values and annotation feature for cumulative values.

The following steps explain how to show cumulative and non-cumulative values in StackedColumnSeries in the SfCartesianChart.

Step 1: Create the Model Class to Hold the Data

The model will contain the cloud data which representing the different cloud providers and their respective values

[C#]

public class CloudDataCenter(string cloud, double unitedStates, double china, double germany, double singapore)
{
   public string? Cloud { get; set; } = cloud;
   public double UnitedStates { get; set; } = unitedStates;
   public double China { get; set; } = china;
   public double Germany { get; set; } = germany;
   public double Singapore { get; set; } = singapore;
}

Step 2: Dataset Creation

Create a CloudViewModel class to hold the dataset.

[C#]

public class CloudViewModel
{
   public ObservableCollection<CloudDataCenter> CloudData { get; set; }

   public CloudViewModel()
   {        
       CloudData = new ObservableCollection<CloudDataCenter>
       {
           new("Microsoft", 25, 30, 25, 15),
           new("Amazon", 20, 25, 18, 10),
           new("Google", 22, 28, 18, 12),
           new("Alibaba", 30, 8, 10, 15),
           new("IBM", 24, 18, 22, 18)
       };
   }
} 

Step 3: Configure the SfCartesianChart

Let’s configure the Syncfusion .NET MAUI ToolKit SfCartesian Chart using this getting started documentation as follows.

[XAML]

<chart:SfCartesianChart x:Name="chart">
    <chart:SfCartesianChart.BindingContext>
        <model:CloudViewModel x:Name="viewModel"/>
    </chart:SfCartesianChart.BindingContext>
    
    <chart:SfCartesianChart.XAxes>
        <chart:CategoryAxis/>
    </chart:SfCartesianChart.XAxes>

    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis/>
    </chart:SfCartesianChart.YAxes>
</chart:SfCartesianChart> 

[C#]

SfCartesianChart chart = new SfCartesianChart();

chart.BindingContext = new CloudViewModel();

// Initialize the primary axis as a CategoryAxis for the X-Axis
CategoryAxis primaryAxis = new CategoryAxis();
chart.XAxes.Add(primaryAxis);

// Initialize the secondary axis as a NumericalAxis for the Y-Axis
NumericalAxis secondaryAxis = new NumericalAxis();
chart.YAxes.Add(secondaryAxis);

this.Content = chart; 

Step 4: Enable DataLabels for Non-Cumulative Values

Add the StackingColumnSeries to the chart, using the ShowDataLabels property of the series to enable and display the non-cumulative values.

[XAML]

<chart:SfCartesianChart x:Name="chart">
   ..........
   ..........
   ..........
   <chart:ChartSeriesCollection>
       <chart:StackingColumnSeries ItemsSource="{Binding CloudData}"
                                   XBindingPath="Cloud" 
                                   YBindingPath="UnitedStates" 
                                   ShowDataLabels="True"/>

       <chart:StackingColumnSeries ItemsSource="{Binding CloudData}"
                                   XBindingPath="Cloud"
                                   YBindingPath="China"
                                   ShowDataLabels="True"/>

       <chart:StackingColumnSeries ItemsSource="{Binding CloudData}" 
                                   XBindingPath="Cloud" 
                                   YBindingPath="Germany" 
                                   ShowDataLabels="True"/>

       <chart:StackingColumnSeries ItemsSource="{Binding CloudData}"
                                   XBindingPath="Cloud" 
                                   YBindingPath="Singapore" 
                                   ShowDataLabels="True"/>
  </chart:ChartSeriesCollection>
</chart:SfCartesianChart> 

[C#]

SfCartesianChart chart = new SfCartesianChart();

// Eliminated for simplicity

StackingColumnSeries series1 = new  StackingColumnSeries()
{
   ItemsSource = new CloudViewModel().CloudData,
   XBindingPath = "Cloud",
   YBindingPath = "UnitedStates",
   ShowDataLabels = true,   // Enable the display of data labels for the series.
};

StackingColumnSeries series2 = new StackingColumnSeries()
{
   ItemsSource = new CloudViewModel().CloudData,
   XBindingPath = "Cloud",
   YBindingPath = "China",
   ShowDataLabels = true,
};

StackingColumnSeries series3 = new  StackingColumnSeries()
{
   ItemsSource = new CloudViewModel().CloudData,
   XBindingPath = "Cloud",
   YBindingPath = "Germany",
   ShowDataLabels = true,
};

StackingColumnSeries series4 = new  StackingColumnSeries()
{
   ItemsSource = new CloudViewModel().CloudData,
   XBindingPath = "Cloud",
   YBindingPath = "Singapore",
   ShowDataLabels = true,
};

// Add all series to the chart
chart.Series.Add(series1);
chart.Series.Add(series2); 
chart.Series.Add(series3);  
chart.Series.Add(series4);          
this.Content = chart; 

In the screenshot below, you can observe non-cumulative values in a stacked column chart.

Step 5: Add Annotations for Cumulative Values

To add annotations, create an instance of any type of annotation and add it to the Annotations collection. In this example, the TextAnnotation is used to display the cumulative values on top of the stacked columns.

[C#]

public partial class MainPage : ContentPage
{
    public MainPage()
    {
       InitializeComponent();

       chart.Annotations = new ChartAnnotationCollection();
       
       for (int i = 0; i < viewModel.CloudData.Count; i++)
       {
           CloudDataCenter data = viewModel.CloudData[i];
           // Calculate the cumulative values by summing the values of the countries
           double cumulativeValues = data.UnitedStates + data.China + data.Germany + data.Singapore;
           
           chart.Annotations.Add(new TextAnnotation()
           {
               Text = cumulativeValues.ToString(),
               X1 = i,
               Y1 = cumulativeValues + 3,// Increase this value for more space between the stack column chart and annotation
               LabelStyle = new ChartAnnotationLabelStyle()
               {
                   FontSize = 20,
                   FontAttributes = FontAttributes.Bold,
               }
           });
       }
    }

} 

Thus, the cumulative and non-cumulative values are shown in the chart as illustrated in the screenshot.

Conclusion

I hope you enjoyed learning about how to show cumulative and non-cumulative values on the stacked column charts in .NET MAUI Cartesian Chart.

You can refer to our .NET MAUI Cartesian Chart feature tour page to know about its other groundbreaking feature representations. You can also explore our documentation to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!