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

Include Negative Values in the Total in Stacked Column Chart

Environment

Product Progress Kendo UI Column Chart

Description

How can I include the negative values in the label's total of a Stacked Column Chart?

Solution

Use the series.labels.template function to calculate and return the desired result.

    <div id="chart"></div>
    <script>
      $(function(){
        $("#chart").kendoChart({
          dataSource:{
            data:[{
              a: -11,
              b: 1,
              c: 11
            },{
              a: 1,
              b: -1,
              c: -1
            }]
          },
          seriesDefaults: {
            type: "column",
            stack: true
          },
          series: [{
            field: "a",
            name: "a"
          },{
            field: "b",
            name: "b"
          },{
            field: "c",
            name: "c",
            labels: {
              template: function(data) {
                var seriesData = data.dataItem
                return seriesData.a + seriesData.b + seriesData.c
              },
              visible: true
            }
          }]
        });
      });
    </script>

See Also

In this article