Edit this page

Sort Stacked Series in Grouped Charts

The order of the stacked series in a grouped chart cannot be set through the sort option of the data source.

The reason for this behavior is that the grouping overrides the sort order as part of its implementation. In effect, the sort order is respected only within the resulting groups. Still, you can influence the final order of the stacked series as follows:

The example below demonstrates how to sort stacked series values in a grouped Kendo UI Chart.

Example
    <div id="chart"></div>
    <script>

      var _globalTimeOut,
          redrawChart = true,
          myValues = {};

      var data = [{
        daysOut: 1,
        type: "A",
        requestor: "Adam"
      },{
        daysOut: 2,
        type: "A",
        requestor: "Bonnie"
      },{
        daysOut: 7,
        type: "A",
        requestor: "Connor"
      },{
        daysOut: 4,
        type: "B",
        requestor: "Adam"
      },{
        daysOut: 6,
        type: "B",
        requestor: "Bonnie"
      },{
        daysOut: 4,
        type: "B",
        requestor: "Zach"
      },{
        daysOut: 3,
        type: "B",
        requestor: "Amber"
      }];

      $("#chart").kendoChart({
        "dataSource": {
          data: data,
          group: {
            field: "type"
          }
        },
        series: [{
          field: "daysOut",
          type: "bar",
          categoryField: "requestor",
          labels: {background: "", visible: true, template: "# if(stackValue) { stackValues[category] = stackValue; } #"},
          stack: true
        }],
        dataBound: function() {
          // Sort on data change
          needsSort = true;
          stackValues = {};
        },
        legendItemClick: function() {
          // Sort on series toggle
          needsSort = true;
        },
        render: function(e) {
          triggerSorting(e);
        }
      });

      function triggerSorting(e) {
        if (!needsSort) {
          return;          
        }

        needsSort = false;
        var axis = e.sender.options.categoryAxis;
        axis.categories = axis.categories.sort(function (a, b) {
          if (stackValues[a] < stackValues[b]) {
            return -1;
          }
          if (stackValues[a] > stackValues[b]) {
            return 1;
          }

          return 0;
        });

        e.sender.redraw();
      }
    </script>

See Also

For more runnable examples on Kendo UI Charts, browse the How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy