Telerik UI for Windows 8 HTML
Contents

You can easily display the value of each series using its label property. However, when stacking series, in order to be able to display a total of all stacked values, you would need to manually sum the values of the stacked series. Below you can see a sample of how this can be achieved in a couple of steps.

  1. The dataSource property of RadChart is of type Telerik.Data.DataSource and it allows you to process data once it is fetched, using the parse event of the schema child object. So, the first step is to define your implementation of the parse function to sum the values from the passed datasource and assign the result to a new property of the data item.

    Calculating total Copy imageCopy
    WinJS.Namespace.define("StackingSeries.Functions", {
    processData: WinJS.Utilities.markSupportedForProcessing(function (dataItems) {
        var item;
        for (var i = 0; i < dataItems.length; i++) {
            item = dataItems[i];
            item.total = item.value1 + item.value2;
        }
        return dataItems;
    })
});

  2. In the series declaration, make the labels visible and using a template, display the value of the newly added property of the dataItem object.

    Displaying total Copy imageCopy
    <div id="chart5" data-win-control="Telerik.UI.RadChart" data-win-options="{
            dataSource: {
                data: [
                    {value1: 15, value2: 17},
                    {value1: 11, value2: 19},
                    {value1: 32, value2: 24}
                ],
                schema: {
                    parse: StackingSeries.Functions.processData
                }
            },
            series: [
                { 
                    field: 'value1', 
                },
                {
                    field: 'value2',
                    labels: {
                        visible: true,
                        template: 'Total: #=dataItem.total#'
                    }
                }
            ],
            seriesDefaults: {
                type: 'column',
                stack: true
            }
        }">
</div>

The resulting chart looks like this:

Stacked series totals

This implementation is part of our SDK Examples and is available for download at the following link: Telerik Windows 8 HTML SDK under Chart/DisplayingTotalSumOfSeriesInAStack.

See Also