StackedColumnRenderableSeries - Stack Columns Vertically, Horizontally and 100%
Posted by Andrew BT on 13 February 2019 05:29 PM
|
|
This article describes main features of the StackedColumnRenderableSeries type. The documentation article can be found at this link. Main Features of the StackedColumnRenderableSeries APITo 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 sideTo 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 SeriesWe expose the following properties properties to customize your StackedColumnRenderableSeries.
Lets take a closer look at each property and its effects below. Spacing and SpacingModeThe 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:
DataPointWidthDataPointWidth 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, LabelTextFormattingShowLabel, 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. IsOneHundredPercentApplied to the first column in a StackedGroup, IsOneHundredPercent changes the Stacked Column chart into a 100% Stacked Column chart. StackedColumnRenderableSeries FAQsQ: 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 ReadingTo learn more about how StackedColumnRenderableSeries work, please take a look at the corresponding documentation articles: Additionally, there are a few examples in the SciChart Examples Suite that demo StackedColumnRenderableSeries. Please find these at the links below:
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. | |
|