New to Kendo UI for jQuery? Start a free 30-day trial

Series.stack

configuration

A boolean value indicating if the series should be stacked. A string value is interpreted as series.stack.group.

The stack options is supported when series.type is set to "bar", "column", "line", "area", "verticalLine", "verticalArea", "radarLine", "radarArea" and "radarColumn".

series.stack

Boolean|String|Object

Default: false

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: "2013/01/01", value1: 40, value2: 20 },
            { date: "2013/01/02", value1: 42, value2: 25 }
        ]
    },
    series: [{
        type: "column",
        field: "value1",
        stack: true
    }, {
        type: "column", 
        field: "value2",
        stack: true
    }],
    categoryAxis: {
        field: "date"
    }
});
</script>

Stack settings of the first series are applied to the rest of the series.

series.stack.group

String

Indicates that the series should be stacked in a group with the specified name.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: "2013/01/01", value1: 40, value2: 60, value3: 30 },
            { date: "2013/01/02", value1: 42, value2: 58, value3: 32 }
        ]
    },
    series: [{
        type: "column",
        field: "value1",
        stack: {
            group: "groupA"
        }
    }, {
        type: "column", 
        field: "value2",
        stack: {
            group: "groupA"
        }
    }, {
        type: "column", 
        field: "value3",
        stack: {
            group: "groupB"
        }
    }],
    categoryAxis: {
        field: "date"
    }
});
</script>

The group option is supported when series.type is set to "bar" or "column".

series.stack.type

String

The type of stack to plot. The following types are supported:

"normal" - the value of the stack is the sum of all points in the category (or group)
"100%" - the value of the stack is always 100% (1.00). Points within the category (or group) are represented as percentages.

Default: "normal"

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: "2013/01/01", value1: 40, value2: 60 },
            { date: "2013/01/02", value1: 42, value2: 58 }
        ]
    },
    series: [{
        type: "column",
        field: "value1",
        stack: {
            type: "100%"
        }
    }, {
        type: "column", 
        field: "value2",
        stack: {
            type: "100%"
        }
    }],
    categoryAxis: {
        field: "date"
    }
});
</script>