Data structure for c3 grouped bar charts? -

i'm using c3js , trying render each of 3 tiers , have bars each months churn grouped under x-axis tier. question should data-structure be?

the current data is:

 [   [     "x",     "tier i",     "tier ii",     "tier iii"   ],   [     [       "apr 2015",       "6"     ],     [       "may 2015",       "3"     ],     [       "jun 2015",       "61"     ],     [       "jul 2015",       "4"     ]   ],   [     [       "apr 2015",       "13"     ],     [       "may 2015",       "3"     ],     [       "jun 2015",       "0"     ],     [       "jul 2015",       "0"     ]   ],   [     [       "apr 2015",       "4"     ],     [       "may 2015",       "5"     ],     [       "jun 2015",       "4"     ],     [       "jul 2015",       "8"     ]   ] 

the current c3 call is:

var chart = c3.generate({             data: {                 x: 'x',                 columns: full,                 type: 'bar'             },             bar: {                 width: {                     ratio: 0.8 // makes bar width 50% of length between ticks                 }             },             axis: {                 x: {                     type: 'categorized' // needed load string x value                 }             },             bindto: '#chart'         }); 

thanks!

note x axis type category not categorized

var full = [     ['x', 'tier i', 'tier ii', 'tier iii'],     ['apr 2015', 6, 13, 4],     ['may 2015', 3, 3, 5],     ['jun 2015', 61, 0, 4],     ['jul 2015', 4, 0, 8] ];  var chart = c3.generate({     data: {         x : 'x',         columns: full,         type: 'bar',     },     bar: {         width: {             ratio: 0.8 // makes bar width 50% of length between ticks         }     },     axis: {         x: {             type: 'category' // needed load string x value         }     },     bindto: '#chart' }); 

---

fiddle - http://jsfiddle.net/6au5alax/

---