How to Show Values on the Column Charts in .NET MAUI Cartesian Chart?

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

The following steps explain how to show cumulative and non-cumulative values in StackedColumnSeries in the .NET MAUI Cartesian Chart.

Step 1: Create the Model Class to Hold the Data

The model will contain the cloud data representing 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

Configure the Syncfusion® .NET MAUI Toolkit Cartesian 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 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 how to show values on the 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. Explore our documentation to understand how to create and manipulate data.

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

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