C3JS bar chart with specific order

Question

If I have a C3JS grouped bar chart defined like the following, how can I get the segments to stay in the order I've defined them instead of in ascending order by value? By default C3 will order them as 5, 10, 40, but I want it to remain as 10, 40, 5.

c3.generate({
  bindto: '.active-loads',
  data: {
    columns: [
      ['Picking up future', 10],
      ['Enroute', 40],
      ['Delivered', 5]
    ],
    type: 'bar',
    groups: [
      ['Picking up future', 'Enroute', 'Delivered']
    ],
    onclick: function(d) {
      console.debug(d);
    }
  },
  axis: {
    rotated: true,
    x: {
      show: false
    }
  }
});

EDIT

Turns out it's as easy as specifying order: null in the data property.

Mulatto

This actually worked. I almost started to write a crazy custom function for ordering -.- – Valero

I was driving me nuts too ;) – Mulatto

I was looking forward to sort the bars on simple bar-chart, if it is possible something like below i mentioned(without any group): var chart = c3.generate({ data: { columns: [['data1', 30, 200, 100, 400, 150, 250],], type: 'bar', order: 'desc' }, }); – Zonnya

Answer 1

C3js documentation has page for this : http://c3js.org/samples/data_order.html

You can order your data in following way :

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 130, 200, 320, 400, 530, 750],
            ['data2', -130, 10, 130, 200, 150, 250],
            ['data3', -130, -50, -10, -200, -250, -150]
        ],
        type: 'bar',
        groups: [
            ['data1', 'data2', 'data3']
        ],
        order: 'desc' // stack order by sum of values descendantly.
//      order: 'asc'  // stack order by sum of values ascendantly.
//      order: null   // stack order by data definition.
    },
    grid: {
        y: {
            lines: [{value:0}]
        }
    }
});

Also detailed explanation here too : http://c3js.org/reference.html#data-order

You can specify your function too :)

Mandeville

I did see that, however it also says that order: null is the default, but if you omit it, it doesn't actually apply it by default. You have to explicitly specify it yourself. – Mulatto

@PatrickGrimard No, It says desc is default check the link i gave above reference one. I think its typo on documentation page because i checked source and desc is the default option there too. I must open issue there. – Mandeville

@Mandeville I was looking forward to sort the bars on simple bar-chart, if it is possible something like below i mentioned. var chart = c3.generate({ data: { columns: [['data1', 30, 200, 100, 400, 150, 250],], type: 'bar', order: 'desc' }, }); – Zonnya