https://github.com/syncfusionexamples/creating-a-stacked-column-100-chart-for-global-distribution-of-cloud-provider-data-centers

This article explains how to create a stacked column 100 chart to visualize the global distribution of cloud data centers.
https://github.com/syncfusionexamples/creating-a-stacked-column-100-chart-for-global-distribution-of-cloud-provider-data-centers

charting-library charts stacked-bar-chart stacked-chart stacked-charts stacked-column-chart stacking-column winui winui-controls

Last synced: 24 days ago
JSON representation

This article explains how to create a stacked column 100 chart to visualize the global distribution of cloud data centers.

• Host: GitHub
• URL: https://github.com/syncfusionexamples/creating-a-stacked-column-100-chart-for-global-distribution-of-cloud-provider-data-centers
• Owner: SyncfusionExamples
• Created: 2023-07-05T04:30:31.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2024-02-15T07:45:48.000Z (9 months ago)
• Last Synced: 2024-10-12T20:22:01.687Z (24 days ago)
• Topics: charting-library, charts, stacked-bar-chart, stacked-chart, stacked-charts, stacked-column-chart, stacking-column, winui, winui-controls
• Language: C#
• Homepage:
• Size: 52.7 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Creating a Stacked Column 100 Chart for Global Distribution of Cloud Provider Data Centers

## Description 

The Stacked Column 100 chart is an effective tool for visually displaying the distribution and proportion of given data. In this graph, columns are piled on top of each other, with the cumulative portion of each stacked element consistently adding up to a total of 100%. This is similar to the StackedColumnSeries, with the key difference being that in the StackedColumn100Series, the cumulative total of stacked elements always equals 100%.

## SegmentSpacing 

The [SegmentSpacing](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.StackedColumnSeries.html#Syncfusion_UI_Xaml_Charts_StackedColumnSeries_SegmentSpacingProperty) property is utilized to customize the space between two segments. The default spacing value is 0, and it can vary from 0 to 1. In this context, 1 and 0 represent 100% and 0% of the total available space respectively.

## CustomTemplate 

The [CustomTemplate](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Charts.StackedColumnSeries.html#Syncfusion_UI_Xaml_Charts_StackedColumnSeries_CustomTemplateProperty) property enables you to obtain the preferred view for the stacked column segment.

This sample visualizes how to create a [stacked column 100 chart](https://www.syncfusion.com/winui-controls/charts/winui-stacked-column-100-chart) to depict the global distribution of cloud data centers.



## Troubleshooting

#### Path too long exception

If you are facing a path too long exception when building this example project, close Visual Studio and rename the repository to short and build the project.

For a step by step procedure, refer to the [Global Distribution of Cloud Provider Data Centers blog](https://www.syncfusion.com/blogs/post/winui-100-stacked-column-chart-cloud-data-centers.aspx).