This article describes main features of the StackedColumnRenderableSeries type. The documentation article can be found at this link.

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

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

<s:SciChartSurface.RenderableSeries>
    <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" />
</s:SciChartSurface.RenderableSeries>

Stacking Vertically (One over Another)

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

<s:SciChartSurface.RenderableSeries>
    <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" />
</s:SciChartSurface.RenderableSeries>

Stacking Vertically 100%

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

<s:SciChartSurface.RenderableSeries>
    <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" />
</s:SciChartSurface.RenderableSeries>

Compound Stacking (Vertical and Horizontal)

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

<s:SciChartSurface.RenderableSeries>
	<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" />
</s:SciChartSurface.RenderableSeries>

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

Lets take a closer look at each property and its effects below.

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

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. 

IsOneHundredPercent

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:SciChartSurface.ChartModifier>
    <s:ModifierGroup>
       <s:TooltipModifier />
       <s:ZoomExtentsModifier />
    </s:ModifierGroup>
</s:SciChartSurface.ChartModifier>

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.

Further Reading

To learn more about how StackedColumnRenderableSeries work, please take a look at the corresponding documentation articles:

• The Stacked Columns Type
• The 100% Stacked Column Series Type
• Grouped Column Series Type

Additionally, there are a few examples in the SciChart Examples Suite that demo StackedColumnRenderableSeries. Please find these at the links below:

• Stacked Column Chart
• Stacked Columns Chart Side by Side
• Stacked Bar Chart
• Dashboard Style Column Charts

Full source code of the examples can be found either in the SciChart Examples Suite, or in the its corresponding project, or online at the links above.