C3 stacked chart maintain data order

Question

I'm following the instructions from the reference and from this answer, but am having no success.

I've got a stacked bar chart, I want the data in the stack to appear in the order it is in in the data, but it's getting re-ordered and I can't figure out how to prevent it.

Here's a jsfiddle.

Here's the code

var chartOptions = {
  element: 'chart',
  data: {
    "rows":[["0-1","2-3","4-5","6","7"],[25,56,14,2,1],[6,66,27,0,0],[0,70,30,0,0],[27,54,14,5,0],[0,54,30,8,8],[29,64,7,0,0]],
    "type":"bar",
    "groups":[["0-1","2-3","4-5","6","7"]],
    "order":null
  },
  axis: {
    "x":{
      "type":"category",
      "categories":["Whole List","committed","community","congregation","core","crowd"]
    },
    "y":{
      "padding":{
        "top":0
      }
    }
  },
  stacked: true,
  size: {"height":300}
}

var chart = c3.generate(chartOptions);

I would like the series to be in the order 0-1, 2-3, 4-5, etc

Answer 1

Turns out this is a known issue. If any one of the headers is an integer (or a string that is an integer), then c3 will sort the columns.

To work around I'm appending a space to the end of the column names so c3 interprets them as a string and not a number.

eg

chartOptions['data']['rows'][0] = ["0-1","2-3","4-5",
                                   "6 ", "7 "]; // Spaces appended to these
chartOptions['data']["groups"] = [["0-1","2-3","4-5","6 ", "7 "]];

I've updated the jsfiddle with the workaround.