Legend order for pie chart

2 posts, 0 answers
  1. Frank
    Frank avatar
    95 posts
    Member since:
    Mar 2012

    Posted 12 Feb 2016 Link to this post

    I have a couple of pie charts on a screen. I have some angular code that populates them.

    $scope.SetPieChart = function (data, container) {
            var dataSource = new kendo.data.DataSource({
                data: data,
                //create group and aggregates
                group: {
                    field: "type",
                    aggregates: [
                        { field: "size", aggregate: "sum" }
            //read dataSourcePeers to load the data
            var series = [],
                items = dataSource.view(),
                length = items.length,
            //create the chart series 
            for (var i = 0; i < length; i++) {
                item = items[i];
                series.push({ category: item.value, value: item.aggregates.size.sum })
                theme: "metro",
                legend: {
                    position: "custom",
                    offsetX: 10,
                    offsetY: 260
                chartArea: { background: "transparent" },
                title: { text: " ", margin: { bottom: -240 } },           
                dataSource: dataSource,
                seriesDefaults: {
                    labels: {
                        visible: false,
                        background: "transparent",
                        template: "#= category #: \n #= value#%"
                    type: "pie"
                chartArea: {
                    margin: 1,
                    height: 450 /* add this option */
                series: [{ data: series }],
                tooltip: {
                    visible: true, format: "{0:N1}%"

     The post event that gets the data returns the data in the order I want to display in the chart but for some reason when it gets displayed on the screen it is alpha order.  Is there something that is forcing the alpha sort? Is there a way to keep the order which is in the returned json


  2. Iliana Nikolova
    Iliana Nikolova avatar
    2622 posts

    Posted 16 Feb 2016 Link to this post

    Hi Frank,

    I replied to the same questions in your other thread, however I am pasting my answer here, too, so the other users who are following this thread could read it:

    By design, the grouping operation works by sorting the data. In order to achieve the expected result I would suggest the following approach:
    - Add an additional field which keeps the sort order and group the dataSource by it;
    - Use legend.labels.template to display different text.
    For your convenience I prepared a dojo which demonstrates a possible implementation - please check it and let me know if this fits the current requirements or I can assist you further. I wish you a great day!

    Iliana Nikolova
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top