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

Display Both StackValue Label and Individual Series Labels

Product Progress® Kendo UI® Chart for jQuery

Description

How can I display both stackValue label and individual series labels in a Stacked Chart?

Solution

  1. Create a new separate series at the end of the corresponding stack and set the values of its data to zero.
  2. Set the stackValue label template in the newly created series.
  3. Do not set the name property of the new series, so it would not be visible in the chart.

The following example demonstrates how to achieve the desired scenario:

<div id="example">
    <div class="demo-section wide">
        <div id="chart"></div>
    </div>
    <script>
        function createChart() {
            $("#chart").kendoChart({
                title: {
                    text: "World population by age group and sex"
                },
                legend: {
                    visible: false
                },
                seriesDefaults: {
                    type: "column"
                },
                series: [{
                    name: "0-19",
                    stack: "Female",
                    labels: {
                            template: "#: kendo.format( ' {0:C0} ' ,value) #",
                      position: "center",
                            visible: true
                            },
                    data: [1172929, 1184435, 1184654]
                }, {
                    name: "20-39",
                    stack: "Female",
                    labels: {
                            template: "#: kendo.format( ' {0:C0} ' ,value) #",
                      position: "center",
                            visible: true
                            },
                    data: [942151, 1001395, 1058439]
                }, {
                    name: "40-64",
                    stack: "Female",
                    labels: {
                            template: "#: kendo.format( ' {0:C0} ' ,value) #",
                      position: "center",
                            visible: true
                            },
                    data: [499861, 569114, 655066]
                }, {
                    name: "65-79",
                    stack: "Female",
                    labels: {
                            template: "#: kendo.format( ' {0:C0} ' ,value) #",
                      position: "center",
                            visible: true
                            },
                    data: [991015, 2110767, 2269156]
                }, {
                    name: "80+",
                    stack: "Female",
                    labels: {
                            template: "#: kendo.format( ' {0:C0} ' ,value) #",
                      position: "center",
                            visible: true
                            },
                    data: [446413, 544984, 646029]
                }, {
                    stack: "Female",
                    labels: {
                            template: "#= stackValue #",
                            visible: true
                            },
                    data: [0, 0, 0]
                }, {
                    name: "0-19",
                    stack: "Male",
                    labels: {
                            template: "#: kendo.format( ' {0:C0} ' ,value) #",
                      position: "center",
                            visible: true
                            },
                    data: [1244870, 1263637, 1268165]
                }, {
                    name: "20-39",
                    stack: "Male",
                    labels: {
                            template: "#: kendo.format( ' {0:C0} ' ,value) #",
                      position: "center",
                            visible: true
                            },
                    data: [973694, 1036548, 1099507]
                }, {
                    name: "40-64",
                    stack: "Male",
                    labels: {
                            template: "#: kendo.format( ' {0:C0} ' ,value) #",
                      position: "center",
                            visible: true
                            },
                    data: [495030, 564169, 646563]
                }, {
                    name: "65-79",
                    stack: "Male",
                    labels: {
                            template: "#: kendo.format( ' {0:C0} ' ,value) #",
                      position: "center",
                            visible: true
                            },
                    data: [1158387, 1177078, 1912156]
                }, {
                    name: "80+",
                    stack: "Male",
                    labels: {
                            template: "#: kendo.format( ' {0:C0} ' ,value) #",
                      position: "center",
                            visible: true
                            },
                    data: [325868, 331462, 339223]
                }],
                seriesColors: ["#cd1533", "#d43851", "#dc5c71", "#e47f8f", "#eba1ad", "",
                               "#009bd7", "#26aadd", "#4db9e3", "#73c8e9", "#99d7ef"],
                valueAxis: {
                    labels: {
                        template: "#= kendo.format('{0:N0}', value / 1000) # M"
                    },
                    line: {
                        visible: false
                    }
                },
                categoryAxis: {
                    categories: [2000, 2005, 2010],
                    majorGridLines: {
                        visible: false
                    }
                },

            });
        }

        $(document).ready(createChart);
        $(document).bind("kendo:skinChange", createChart);
    </script>
</div>

See Also

In this article