diff --git a/controls/htmlchart/functionality/100-stacked-series.md b/controls/htmlchart/functionality/100-stacked-series.md new file mode 100644 index 0000000000..063363bd7b --- /dev/null +++ b/controls/htmlchart/functionality/100-stacked-series.md @@ -0,0 +1,159 @@ +--- +title: 100% Stacked Series +page_title: 100% Stacked Series | RadHtmlChart for ASP.NET AJAX Documentation +description: 100% Stacked Series +slug: htmlchart/functionality/100-stacked-series +tags: 100%,stacked,series +published: True +position: 6 +--- + +# 100% Stacked Series + +100% stacked series display the values from multiple series as stacks or group of stacks over the x-axis categories, where the values proportions from each stack totals 100%. This series type is useful for cases where the contribution of values within stacks is more meaningful than the amounts themselves. + +The functionality is available for category series - bar, column, line, area and radar (area, line and column). + + * [Configure 100% Stacked Series](#configure-100-stacked-series) + + * [Configure 100% Stacked and Grouped Series](#configure-100-stacked-and-grouped-series) + +## Configure 100% Stacked Series + +To configure 100% stacked series you should set the following properties of the first series - `Stacked="true"` and `StackType="Stack100"`. + +>caption Figure 1: Shows the output from Example 1, which demonstrates stacked 100% column series. + +![htmlchart-stacked-100-column-series](images/htmlchart-stacked-100-column-series.png) + +You can create **Figure 1** using the markup in **Example 1**. + +>caption Example 1: Shows an implementation of chart with 100% stacked columns. + +````ASP.NET + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +```` + +## Configure 100% Stacked and Grouped Series + +To configure 100% stacked and grouped series you should do the following: + +1. Set the the following property to the first series - `StackType="Stack100"`. + +1. Set the same group name to the `GroupName` property of series that will be stacked in a separate group. + +>tip If you leave the `GroupName` property blank, all the series will be placed in one default stack. +Setting the `GroupName` property of any series automatically sets the `Stacked` property of the first series to `true`, so it is not required to be explicitly set. + +>caption Figure 2: Shows the outpue from Example 2, which demonstrates a 100% stacked and grouped column series. + +![htmlchart-100-stacked-and-grouped-column-series](images/htmlchart-100-stacked-and-grouped-column-series.png) + +You can create **Figure 2** using the markup in **Example 2**. + +>caption Example 2: Shows an implementation of chart with 100% stacked and grouped columns. + +````ASP.NET + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +```` + +````JavaScript + +```` + + +## See Also + + * [HtmlChart - 100% Stacked Series Live Demo](http://demos.telerik.com/aspnet-ajax/htmlchart/examples/functionality/100-stacked-series/defaultcs.aspx) + + * [Stacked Series]({%slug htmlchart/functionality/stacked-series%}) + diff --git a/controls/htmlchart/functionality/images/htmlchart-100-stacked-and-grouped-column-series.png b/controls/htmlchart/functionality/images/htmlchart-100-stacked-and-grouped-column-series.png new file mode 100644 index 0000000000..7c32af7876 Binary files /dev/null and b/controls/htmlchart/functionality/images/htmlchart-100-stacked-and-grouped-column-series.png differ diff --git a/controls/htmlchart/functionality/images/htmlchart-stacked-100-column-series.png b/controls/htmlchart/functionality/images/htmlchart-stacked-100-column-series.png new file mode 100644 index 0000000000..15d30211f1 Binary files /dev/null and b/controls/htmlchart/functionality/images/htmlchart-stacked-100-column-series.png differ diff --git a/controls/htmlchart/functionality/stacked-series.md b/controls/htmlchart/functionality/stacked-series.md index 18a05dd119..892595a94a 100644 --- a/controls/htmlchart/functionality/stacked-series.md +++ b/controls/htmlchart/functionality/stacked-series.md @@ -122,6 +122,8 @@ You can create **Figure 1** using the markup in **Example 1**. ## See Also + * [100% Stacked Series]({%slug htmlchart/functionality/100-stacked-series%}) + * [Bar Chart]({%slug htmlchart/chart-types/bar-chart%}) * [Column Chart]({%slug htmlchart/chart-types/column-chart%}) diff --git a/controls/htmlchart/functionality/visual-template.md b/controls/htmlchart/functionality/visual-template.md index ab1a908622..8f1b9d7b44 100644 --- a/controls/htmlchart/functionality/visual-template.md +++ b/controls/htmlchart/functionality/visual-template.md @@ -5,7 +5,7 @@ description: Custom Visual Template for Chart Elements slug: htmlchart/functionality/visual-template tags: custom,visual,template,visualization published: True -position: 6 +position: 7 --- # Visual Template