Making a WinUI 100% Stacked Column Chart for World Distribution of Cloud Supplier Knowledge Facilities

Welcome to our Chart of the Week weblog sequence.

This time, we’ll visualize the worldwide distribution of cloud supplier knowledge facilities utilizing the Syncfusion WinUI 100% stacked column chart management.

Microsoft, Amazon, Google, Alibaba, and IBM have unfold their world cloud knowledge facilities throughout Asia, North America, and Europe. Confer with the next chart picture.

Let’s see the steps to recreate this chart utilizing the Syncfusion 100% stacked column chart.

Step 1: Collect the info

Let’s collect the info on knowledge middle suppliers from Cloud Myths. Particularly, we’re utilizing web page 16.

Step 2: Put together the info for the chart

Subsequent, outline the CloudDataCenter class with the Cloud, South-East Asia, North America, Europe, and different properties to retailer the rely for cloud suppliers.

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 info assortment demonstrating the info suppliers’ supply utilizing the DataCenterPercentage class.

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 management

Let’s configure the Syncfusion WinUI Cartesian Charts management utilizing this documentation.

Confer with the next code instance.

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

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

Create a number of 100 % stacked column sequence to show the quantity and proportion for the distribution of information facilities.

The next code instance demonstrates the best way to bind the cloud knowledge to our chart.

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

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

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

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

Step 5: Customise the chart look

We will improve the looks of our chart by customizing its options, such because the title, axis parts, column colours, legend, and knowledge labels.

We will extra simply perceive the info plotted on the chart by including a title. Confer with the next code instance.

<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 Knowledge="{StaticResource PathData}" Fill="Black" VerticalAlignment="Heart" HorizontalAlign-ment="Heart"/>
   <TextBlock Textual content="World Cloud Knowledge Facilities" Margin="10,0,0,0"/>
  </StackPanel>
 </Border>
</chart:SfCartesianChart.Header>

Let’s customise the axis label fashion and set the interval kind, font measurement, and different properties.

<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>

Confer with the next code instance to configure the 100% stacked column chart shade.

XML

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

C#

public class DataCenterPercentage
{
   public Listing<Brush> CustomBrushes{ get; set; }

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

Confer with the next code instance to allow and customise the legend, which signifies the area of the info facilities.

<chart:SfCartesianChart.Legend>
 <chart:ChartLegend Placement="Proper" ItemMargin="4"/>
</chart:SfCartesianChart.Legend>

Then, allow and customise the info labels for every sequence within the chart, as proven within the following code instance.

<!--Sequence 1 -->
<chart:StackedColumn100Series ShowDataLabels="True">
 <chart:StackedColumn100Series.DataLabelSettings>
  <chart:CartesianDataLabelSettings Place="Internal" Context="DataLabelItem">
   <chart:CartesianDataLabelSettings.ContentTemplate>
    <DataTemplate>
     <TextBlock Textual content="{Binding Merchandise.SoutheastAsiaValue}" FontSize="12.5" Foreground="{Binding Converter={StaticResource contrastColorConverter}}"/>        
    </DataTemplate>
   </chart:CartesianDataLabelSettings.ContentTemplate>
  </chart:CartesianDataLabelSettings>
 </chart:StackedColumn100Series.DataLabelSettings>
</chart:StackedColumn100Series>

<!--Sequence 2 -->
<chart:StackedColumn100Series ShowDataLabels="True">
 <chart:StackedColumn100Series.DataLabelSettings>
  <chart:CartesianDataLabelSettings Place="Internal" Context="DataLabelItem">
   <chart:CartesianDataLabelSettings.ContentTemplate>
    <DataTemplate>
     <TextBlock Textual content="{Binding Merchandise.NorthAmericaValue}" FontSize="12.5" Foreground="{Binding Converter={StaticResource contrastColorConverter}}"/>     
    </DataTemplate>
   </chart:CartesianDataLabelSettings.ContentTemplate>
  </chart:CartesianDataLabelSettings>
 </chart:StackedColumn100Series.DataLabelSettings>
</chart:StackedColumn100Series>

<!--Sequence 3 -->
<chart:StackedColumn100Series ShowDataLabels="True">
 <chart:StackedColumn100Series.DataLabelSettings>
  <chart:CartesianDataLabelSettings Place="Internal" Context="DataLabelItem">
   <chart:CartesianDataLabelSettings.ContentTemplate>
    <DataTemplate>
     <TextBlock Textual content="{Binding Merchandise.EuropeValue}" FontSize="12.5" Foreground="{Binding Converter={StaticResource contrastColorConverter}}"/>
    </DataTemplate>
   </chart:CartesianDataLabelSettings.ContentTemplate>
  </chart:CartesianDataLabelSettings>
 </chart:StackedColumn100Series.DataLabelSettings>
</chart:StackedColumn100Series>

<!--Sequence 4 -->
<chart:StackedColumn100Series ShowDataLabels="True">
 <chart:StackedColumn100Series.DataLabelSettings>
  <chart:CartesianDataLabelSettings Place="Internal" Context="DataLabelItem">
   <chart:CartesianDataLabelSettings.ContentTemplate>
    <DataTemplate>
     <TextBlock Textual content="{Binding Merchandise.OthersValue}" FontSize="12.5" Foreground="{Binding Converter={StaticResource contrastColorConverter}}"/>
    </DataTemplate>
   </chart:CartesianDataLabelSettings.ContentTemplate>
  </chart:CartesianDataLabelSettings>
 </chart:StackedColumn100Series.DataLabelSettings>
</chart:StackedColumn100Series>

Right here, we’ve created the SoutheastAsiaValue, NorthAmericaValue, EuropeValue, and OthersValue properties to retailer the variety of cloud suppliers with their respective proportion values.

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

After executing these code examples, we’ll get output like within the following picture.

GitHub reference

For extra particulars, check with the demo on GitHub.

Conclusion

Thanks for studying! On this weblog, we’ve proven the best way to visualize the worldwide distribution of cloud supplier knowledge facilities utilizing the Syncfusion WinUI 100 % stacked column chart. We encourage you to observe the steps outlined on this weblog and share your helpful suggestions within the feedback part beneath.

When you’ve got questions, please contact us through our help discussion board, help portal, or suggestions portal. We’re all the time keen that will help you!

Associated blogs