Telerik UI for Windows 8 HTML
Contents

RadChart for Windows 8 HTML implements stacking of its area, bar, column and line series. This allows you to place multiple series in one chart, separating them vertically, for better visualization. Stacking is controlled by the stack property which, based on the series type, can accept Boolean and/or string values. If you read on, you will get acquainted with the specifics of stacking series in RadChart.

Description of Stacking Series

Stacking puts the first declared series as normal - starting from point 0 on the value axis and then starts drawing each subsequent series of the same type on top of the previously drawn ones. The start value of the latter series is the end value of the former ones. At the end, the value reached by the last drawn column, line, etc., is the total sum of all series stacked one over another.

Stacking Series Example Copy imageCopy
<div id="chart1" data-win-control="Telerik.UI.RadChart" data-win-options="{
            series: [
                {
                    data: [1, 16, 28],
                },
                {
                    data: [6, 12, 35]
                }
            ],
            seriesDefaults: {
                stack: true
            },
            width: 500
        }">
</div>
Stacking series

Stacking Bar and Column Series

You can assign either a Boolean value or a non-empty string to the stack property of Bar and Column series. Assigning true means that series will be stacked each over the other. It is enough to set stack = true for the first declared series of a given type, all series of this type will be stacked. Another option to achieve the same result is to set stack=true in the seriesDefault property, which applies its settings to all series.

Stacking a Bar Series Copy imageCopy
<div id="chart2" data-win-control="Telerik.UI.RadChart" data-win-options="{
            series: [
                {
                    data: [1, 16, 28],
                    type: 'bar',
                    stack: true
                },
                {
                    data: [6, 12, 35],
                    type: 'bar'
                }
            ],
            width: 500
        }">
</div>
Stacking bar series

If you want to group stacked series, give the stack property of each series a string value – it should be the same for the series that you want to group together. If you leave a series without the stack property set or with a group name that is unique to this series only, it will not be stacked.

Grouping Stacked Series Copy imageCopy
<div id="chart3" data-win-control="Telerik.UI.RadChart" data-win-options="{
            series: [
                {
                    data: [1, 16, 28],
                    stack: 'stack1'
                },
                {
                    data: [6, 12, 35],
                    stack: 'stack2'
                },
                {
                    data: [3, 12, 38],
                    stack: 'stack1'
                },
                {
                    data: [14, 12, 22],
                    stack: 'stack2'
                }
            ],
            width: 500
        }">
</div>
Grouping stacked series

Stacking Area and Line Series

The stack property of Area and Line series accepts only Boolean values, due to the nature of the series itself (you cannot have groups of stacked Line series). Setting it to true for the first declared series, or through the seriesDefaults property, will cause all series of the same type to get stacked.

Stacking an Area Series Copy imageCopy
<div id="chart4" data-win-control="Telerik.UI.RadChart" data-win-options="{
            series: [
                {
                    data: [1, 16, 28],
                    type: 'area',
                    stack: true
                },
                {
                    data: [6, 12, 35],
                    type: 'area'
                }
            ],
            width: 500
        }">
</div>
Stacking area series