Knowledgebase: Chart Types
StackedColumnRenderableSeries - Stack Columns Vertically, Horizontally and 100%
Posted by Andrew BT on 06 November 2014 12:13 PM

New to v3.2, a major overhaul to the Stacked Columns and Stacked Mountains functionality. See below for what we've added!

Main Features of the StackedColumnRenderableSeries API

To enable stacking of a column series, you need to set the StackedColumnRenderableSeries.StackedGroupId property. Let’s assume that one column defines the group. If you want force your series to stack one over another, you need to set the same StackedGroupId for every series from same column. If you want to force your series to be drawn side-by-side, each of the series has to have a different StackedGroupId. Some examples can be found below:

Stacking Columns side by side

Stacked Columns Side by Side

To achieve stacking side by side, give each StackedColumnRenderableSeries a different StackedGroupId.

    <s:StackedColumnRenderableSeries DataPointWidth="0.9" FillBrush="#3399ff" StackedGroupId="China" />
    <s:StackedColumnRenderableSeries FillBrush="#014358" StackedGroupId="India" />
    <s:StackedColumnRenderableSeries FillBrush="#1f8a71" StackedGroupId="USA" />
    <s:StackedColumnRenderableSeries FillBrush="#bdd63b" StackedGroupId="Indonesia" />
    <s:StackedColumnRenderableSeries FillBrush="#ffe00b" StackedGroupId="Brazil" />
    <s:StackedColumnRenderableSeries FillBrush="#f27421" StackedGroupId="Pakistan" />

Stacking Vertically (One over Another)

Stacked Columns Vertically

To achieve vertical stacking, give each StackedColumnRenderableSeries the same StackedGroupId.

    <s:StackedColumnRenderableSeries DataPointWidth="0.9" FillBrush="#3399ff" StackedGroupId="group" />
    <s:StackedColumnRenderableSeries FillBrush="#014358" StackedGroupId="group" />
    <s:StackedColumnRenderableSeries FillBrush="#1f8a71" StackedGroupId="group" />
    <s:StackedColumnRenderableSeries FillBrush="#bdd63b" StackedGroupId="group" />
    <s:StackedColumnRenderableSeries FillBrush="#ffe00b" StackedGroupId="group" />

Stacking Vertically 100%

Stacked Columns 100%

To achieve 100% Stacked columns, use the same StackedGroupId and also set IsOneHundredPercent=True on the first column in the group.

    <s:StackedColumnRenderableSeries DataPointWidth="0.9" FillBrush="#3399ff" StackedGroupId="group" InOneHundredPercent="true" />
    <s:StackedColumnRenderableSeries FillBrush="#014358" StackedGroupId="group" />
    <s:StackedColumnRenderableSeries FillBrush="#1f8a71" StackedGroupId="group" />
    <s:StackedColumnRenderableSeries FillBrush="#bdd63b" StackedGroupId="group" />
    <s:StackedColumnRenderableSeries FillBrush="#ffe00b" StackedGroupId="group" />

Compound Stacking (Vertical and Horizontal)

Stacked Columns Compound

By using two different StackedGroupIds, it is possible to achieve compound stacking effects, as you can see in our Stacked Columns example. 

	<s:StackedColumnRenderableSeries DataPointWidth="0.9" FillBrush="#FF226Fb7" SeriesColor="#333" ShowLabel="True" Spacing="0"
										StackedGroupId="Meat" />
	<s:StackedColumnRenderableSeries DataPointWidth="0.35" FillBrush="#ffff9a2e" SeriesColor="#333" ShowLabel="True"
										StackedGroupId="Meat" />
	<s:StackedColumnRenderableSeries FillBrush="#ffdc443f" SeriesColor="#333" ShowLabel="True" Spacing="0"
										StackedGroupId="Vegetables" />
	<s:StackedColumnRenderableSeries DataPointWidth="0.35" FillBrush="#ffaad34f" SeriesColor="#333" ShowLabel="True"
										StackedGroupId="Vegetables" />
	<s:StackedColumnRenderableSeries DataPointWidth="0.35" FillBrush="#ff8562b4" SeriesColor="#333" ShowLabel="True"
										StackedGroupId="Vegetables" />

Configuring Stacked Column Series

We expose the following properties properties to customize your StackedColumnRenderableSeries. 

  • StackedColumnRenderableSeries.Spacing
  • StackedColumnRenderableSeries.SpacingMode
  • StackedColumnRenderableSeries.DataPointWidth
  • StackedColumnRenderableSeries.ShowLabel
  • StackedColumnRenderableSeries.LabelColor
  • StackedColumnRenderableSeries.LabelFontSize
  • StackedColumnRenderableSeries.LabelTextFormatting
  • StackedColumnRenderableSeries.IsOneHundredPercent

Spacing and SpacingMode

The Spacing and SpacingMode properties customize the spacing between columns inside one DataPoint. (This impacts only the stacked side-by-side columns)

SpacingMode property defines how the Spacing is used. There are two Spacing Modes:

  1. SpacingMode.Absolute: Spacing property is the space in pixels
  2. SpacingMode.Relative: Spacing property is the space relative to the column width, so set Spacing = 1.0 then spacing will be equal to the column width


DataPointWidth property behaves like the regular FastColumnRenderableSeries, it impacts on the available space for each DataPoint of StackedColumnRenderableSeries. On the image below, we have DataPointWidth = 0.8. This is why we have spacing between each DataPoint.


ShowLabel, LabelColor, LabelFontSize, LabelTextFormatting

ShowLabel, LabelColor, LabelFontSize, LabelTextFormatting are used to define the appearance of the label inside the column that show actual values for series at that DataPoint. 

When IsOneHundredPercent property is true, the label shows the proportion between values in each grouping. 


Applied to the first column in a StackedGroup, IsOneHundredPercent changes the Stacked Column chart into a 100% Stacked Column chart.  

StackedColumnRenderableSeries FAQs

Q: How do I change font size?

A: To change font size of labels inside StackedColumnRenderableSeries column, you should set LabelFontSize property:

<s:StackedColumnRenderableSeries StackedGroupId="someGroup" LabelFontSize="10" />

Q: How to turn labels on/off?

A: To turn labels on/off you should set ShowLabel property to true/false appropriately:

<s:StackedColumnRenderableSeries StackedGroupId="someGroup" ShowLabel ="true" />

Q: How to define label colors?

A: To define label color you should set LabelColor property of type System.Windows.Media.Color, for example

<s:StackedColumnRenderableSeries StackedGroupId="someGroup" LabelColor ="#FF3399FF" />

Q: How to show/hide mouse-over tooltips?

A: To show mouse-over tooltips, you should use our TooltipModifier :

       <s:TooltipModifier />
       <s:ZoomExtentsModifier />

Q: How to get an event on mouse-over?

A: You can use our Hit-Test API, and raise your custom defined event, if hit-test returns true.

(2 vote(s))
Not helpful

Comments (0)


Not sure where to start? Contact us, we are happy to help!


SciChart Ltd, 16 Beaufort Court, Admirals Way, Docklands, London, E14 9XL. Email: Legal Company Number: 07430048, VAT Number: 101957725