Chart of the Week: Creating a WinUI 100% Stacked Column Chart for Global Distribution of Cloud Provider Data Centers
Tags: winui, chart, ui, desktop
Published: 2023-08-04 16:01:23

---
title: Chart of the Week: Creating a WinUI 100% Stacked Column Chart for Global Distribution of Cloud Provider Data Centers
published: true
date: 2023-08-04 12:47:23 UTC
tags: winui, chart, ui, desktop
canonical_url: https://www.syncfusion.com/blogs/post/winui-100-stacked-column-chart-cloud-data-centers.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zzdi2knmy6rr8rdvzci7.png
---
Welcome to our **Chart of the Week** blog series.

This time, we’ll visualize the global distribution of cloud provider data centers using the Syncfusion [WinUI 100% stacked column chart](https://www.syncfusion.com/winui-controls/charts/winui-stacked-column-100-chart "WinUI 100% Stacked Column Chart") control.

Microsoft, Amazon, Google, Alibaba, and IBM have spread their global cloud data centers across Asia, North America, and Europe. Refer to the following chart image.

![Visualizing distribution of cloud provider data centers using WinUI 100% stacked column chart](https://www.syncfusion.com/blogs/wp-content/uploads/2023/08/Visualizing-distribution-of-cloud-provider-data-centers-using-WinUI-100-stacked-column-chart.png)Let’s see the steps to recreate this chart using the Syncfusion 100% stacked column chart.

## Step 1: Gather the data

Let’s gather the data on data center providers from [Cloud Myths](https://www.atlanticcouncil.org/wp-content/uploads/2020/09/CLOUD-MYTHS-REPORT.pdf "Cloud Myths Report"). Specifically, we are using page 16.

## Step 2: Prepare the data for the chart

Next, define the **CloudDataCenter** class with the **Cloud** , **South-East Asia** , **North America** , **Europe,** and **other** properties to store the count for cloud providers.

```csharp
public class CloudDataCenter
{
   public string Cloud { get; set; }
   public double SoutheastAsia { get; set; }
   public double NorthAmerica { get; set; }
   public double Europe { get; set; }
   public double Others { get; set; }
}
```

Generate the data collection demonstrating the data providers’ source using the **DataCenterPercentage** class.

```csharp
public class DataCenterPercentage
{
   public ObservableCollection<CloudDataCenter> CloudData { get; set; }
   public DataCenterPercentage()
   {
       CloudData = new ObservableCollection<CloudDataCenter>()
       {
             new CloudDataCenter() { Cloud = "Microsoft", SoutheastAsia = 31,NorthAmerica = 37,Europe = 32, Others = 18},
             new CloudDataCenter() { Cloud = "Amazon", SoutheastAsia = 21, NorthAmerica = 25,Europe = 18, Others = 12},
             new CloudDataCenter() { Cloud = "Google", SoutheastAsia = 24, NorthAmerica = 25, Europe = 18, Others = 6 },
             new CloudDataCenter() { Cloud = "Alibaba", SoutheastAsia = 49, NorthAmerica = 4, Europe = 4, Others = 3},
             new CloudDataCenter() { Cloud = "IBM", SoutheastAsia = 8, NorthAmerica = 28, Europe = 18, Others = 6 },
        };
   }
}
```

## Step 3: Configure the Syncfusion WinUI Cartesian Charts control

Let’s configure the Syncfusion WinUI Cartesian Charts control using this [documentation](https://help.syncfusion.com/winui/cartesian-charts/getting-started "Getting started with WinUI Cartesian Charts").

Refer to the following code example.

```xml
<chart:SfCartesianChart>
 <chart:SfCartesianChart.XAxes>
  <chart:CategoryAxis/>
 </chart:SfCartesianChart.XAxes>
            
 <chart:SfCartesianChart.YAxes>
  <chart:NumericalAxis/>   
 </chart:SfCartesianChart.YAxes>
</chart:SfCartesianChart>
```

## Step 4: Bind the data to WinUI 100% stacked column chart

Create multiple **100 % stacked column series** to display the number and percentage for the distribution of data centers.

The following code example demonstrates how to bind the cloud data to our chart.

```xml
<!--Series 1 -->
<chart:StackedColumn100Series ItemsSource="{Binding CloudData}" XBindingPath="Cloud" YBindingPath="SoutheastAsia" Label="East and South East Asia">
</chart:StackedColumn100Series>

<!--Series 2 -->
<chart:StackedColumn100Series ItemsSource="{Binding CloudData}" XBindingPath="Cloud" YBindingPath="NorthAmerica" Label="North America">
</chart:StackedColumn100Series>

<!--Series 3 -->
<chart:StackedColumn100Series ItemsSource="{Binding CloudData}" XBindingPath="Cloud" YBindingPath="Europe" Label="Europe">
</chart:StackedColumn100Series>

<!--Series 4 -->
<chart:StackedColumn100Series ItemsSource="{Binding CloudData}" XBindingPath="Cloud" YBindingPath="Others" Label="Rest of the World">
</chart:StackedColumn100Series>
```

## Step 5: Customize the chart appearance

We can enhance the appearance of our chart by customizing its features, such as the title, axis elements, column colors, legend, and data labels.

We can more easily understand the data plotted on the chart by adding a title. Refer to the following code example.

```xml
<chart:SfCartesianChart.Header>
 <Border Margin="0,-10,0,20" Padding="7" BorderThickness="2,0,2,2" CornerRadius="0,0,7,7" Border-Brush="#79747E">
  <StackPanel Orientation="Horizontal">
   <Path Data="{StaticResource PathData}" Fill="Black" VerticalAlignment="Center" HorizontalAlign-ment="Center"/>
   <TextBlock Text="Global Cloud Data Centers" Margin="10,0,0,0"/>
  </StackPanel>
 </Border>
</chart:SfCartesianChart.Header>
```

Let’s customize the axis label style and set the interval type, font size, and other properties.

```xml
<chart:SfCartesianChart.XAxes>
 <chart:CategoryAxis LabelPlacement="BetweenTicks" ShowMajorGridLines="False" TickLineSize="0">
  <chart:CategoryAxis.LabelStyle>
   <chart:LabelStyle FontSize="13"/>
  </chart:CategoryAxis.LabelStyle>
 </chart:CategoryAxis>
</chart:SfCartesianChart.XAxes>
            
<chart:SfCartesianChart.YAxes>
 <chart:NumericalAxis Interval="20" ShowMajorGridLines="False">
  <chart:NumericalAxis.LabelStyle>
   <chart:LabelStyle LabelFormat="0'%" FontSize="13"/>
  </chart:NumericalAxis.LabelStyle>
 </chart:NumericalAxis>
</chart:SfCartesianChart.YAxes>
```

Refer to the following code example to configure the 100% stacked column chart color.

**XML**

```xml
<chart:SfCartesianChart PaletteBrushes="{Binding CustomBrushes}">
</chart:SfCartesianChart>
```

**C#**

```csharp
public class DataCenterPercentage
{
   public List<Brush> CustomBrushes{ get; set; }

   public DataCenterPercentage ()
   {
      CustomBrushes = new List<Brush>()
      {
         new SolidColorBrush(Color.FromArgb(0xFF, 0x00, 0x81, 0xFF)),
         new SolidColorBrush(Color.FromArgb(0xFF, 0x8C, 0xDB, 0x07)),
         new SolidColorBrush(Color.FromArgb(0xFF, 0xAF, 0x00, 0xFB)),
         new SolidColorBrush(Color.FromArgb(0xFF, 0xFF, 0xC5, 0x1E)),
      };        
   }
}
```

Refer to the following code example to enable and customize the legend, which indicates the region of the data centers.

```xml
<chart:SfCartesianChart.Legend>
 <chart:ChartLegend Placement="Right" ItemMargin="4"/>
</chart:SfCartesianChart.Legend>
```

Then, enable and customize the data labels for each series in the chart, as shown in the following code example.

```xml
<!--Series 1 -->
<chart:StackedColumn100Series ShowDataLabels="True">
 <chart:StackedColumn100Series.DataLabelSettings>
  <chart:CartesianDataLabelSettings Position="Inner" Context="DataLabelItem">
   <chart:CartesianDataLabelSettings.ContentTemplate>
    <DataTemplate>
     <TextBlock Text="{Binding Item.SoutheastAsiaValue}" FontSize="12.5" Foreground="{Binding Converter={StaticResource contrastColorConverter}}"/>        
    </DataTemplate>
   </chart:CartesianDataLabelSettings.ContentTemplate>
  </chart:CartesianDataLabelSettings>
 </chart:StackedColumn100Series.DataLabelSettings>
</chart:StackedColumn100Series>

<!--Series 2 -->
<chart:StackedColumn100Series ShowDataLabels="True">
 <chart:StackedColumn100Series.DataLabelSettings>
  <chart:CartesianDataLabelSettings Position="Inner" Context="DataLabelItem">
   <chart:CartesianDataLabelSettings.ContentTemplate>
    <DataTemplate>
     <TextBlock Text="{Binding Item.NorthAmericaValue}" FontSize="12.5" Foreground="{Binding Converter={StaticResource contrastColorConverter}}"/>     
    </DataTemplate>
   </chart:CartesianDataLabelSettings.ContentTemplate>
  </chart:CartesianDataLabelSettings>
 </chart:StackedColumn100Series.DataLabelSettings>
</chart:StackedColumn100Series>

<!--Series 3 -->
<chart:StackedColumn100Series ShowDataLabels="True">
 <chart:StackedColumn100Series.DataLabelSettings>
  <chart:CartesianDataLabelSettings Position="Inner" Context="DataLabelItem">
   <chart:CartesianDataLabelSettings.ContentTemplate>
    <DataTemplate>
     <TextBlock Text="{Binding Item.EuropeValue}" FontSize="12.5" Foreground="{Binding Converter={StaticResource contrastColorConverter}}"/>
    </DataTemplate>
   </chart:CartesianDataLabelSettings.ContentTemplate>
  </chart:CartesianDataLabelSettings>
 </chart:StackedColumn100Series.DataLabelSettings>
</chart:StackedColumn100Series>

<!--Series 4 -->
<chart:StackedColumn100Series ShowDataLabels="True">
 <chart:StackedColumn100Series.DataLabelSettings>
  <chart:CartesianDataLabelSettings Position="Inner" Context="DataLabelItem">
   <chart:CartesianDataLabelSettings.ContentTemplate>
    <DataTemplate>
     <TextBlock Text="{Binding Item.OthersValue}" FontSize="12.5" Foreground="{Binding Converter={StaticResource contrastColorConverter}}"/>
    </DataTemplate>
   </chart:CartesianDataLabelSettings.ContentTemplate>
  </chart:CartesianDataLabelSettings>
 </chart:StackedColumn100Series.DataLabelSettings>
</chart:StackedColumn100Series>
```

Here, we have created the **SoutheastAsiaValue** , **NorthAmericaValue** , **EuropeValue** , and **OthersValue** properties to store the number of cloud providers with their respective percentage values.

```csharp
public class CloudDataCenter
{
    private double Total => SoutheastAsia + NorthAmerica + Europe + Others;
    public string SoutheastAsiaValue => $"{SoutheastAsia} ({((SoutheastAsia / Total) * 100):F0}%)";
    public string NorthAmericaValue => $"{NorthAmerica} ({((NorthAmerica / Total) * 100):F0}%)";
    public string EuropeValue => $"{Europe} ({((Europe / Total) * 100):F0}%)";
    public string OthersValue => $"{Others} ({((Others / Total) * 100):F0}%)"; }
```

After executing these code examples, we’ll get output like in the following image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/08/Visualizing-distribution-of-cloud-provider-data-centers-using-WinUI-100-stacked-column-chart.png" alt="Visualizing distribution of cloud provider data centers using WinUI 100% stacked column chart" style="width:100%">

  <figcaption>Visualizing distribution of cloud provider data centers using WinUI 100% stacked column chart</figcaption>

</figure>

## GitHub reference

For more details, refer to the demo on [GitHub](https://github.com/SyncfusionExamples/Creating-a-Stacked-Column-100-Chart-for-Global-Distribution-of-Cloud-Provider-Data-Centers "WinUI 100% Stacked Column Chart for Global Distribution of Cloud Provider Data Centers GitHub demo").

## Conclusion

Thanks for reading! In this blog, we have shown how to visualize the global distribution of cloud provider data centers using the Syncfusion [WinUI 100 % stacked column chart](https://www.syncfusion.com/winui-controls/charts/winui-stacked-column-100-chart "WinUI 100 % stacked column chart"). We encourage you to follow the steps outlined in this blog and share your valuable feedback in the comments section below.

If you have questions, please contact us via our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback "Syncfusion Feedback Portal"). We are always eager to help you!

## Related blogs

- [Personalize Your WinUI DataGrid: Quick and Simple Customization Techniques](https://www.syncfusion.com/blogs/post/winui-datagrid-customization.aspx "Blog: Personalize Your WinUI DataGrid: Quick and Simple Customization Techniques")
- [Introducing the New WinUI AvatarView Control](https://www.syncfusion.com/blogs/post/winui-avatarview-control.aspx "Blog: Introducing the New WinUI AvatarView Control")
- [How to Synchronize Outlook Calendar Events with Syncfusion WinUI Scheduler](https://www.syncfusion.com/blogs/post/synchronize-outlook-calendar-events-with-syncfusion-winui-scheduler.aspx "Blog: How to Synchronize Outlook Calendar Events with Syncfusion WinUI Scheduler")
- [Implement Fuzzy Search in Syncfusion WinUI AutoComplete](https://www.syncfusion.com/blogs/post/fuzzy-search-in-winui-autocomplete.aspx "Blog: Implement Fuzzy Search in Syncfusion WinUI AutoComplete")