title: Data structure for c3 grouped bar charts?
body: <p>I'm using c3js and trying to render each of the three tiers and have the bars for each months churn grouped under an x-axis tier.  My question is what should the data-structure be?</p>
  
  <p><img src="https://i.stack.imgur.com/jWioW.png" alt="enter image description here"></p>
  
  <p>The current data is:</p>
  
  <pre><code> [
    [
      "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"
      ]
    ]
  </code></pre>
  
  <p>The current c3 call is:</p>
  
  <pre><code>var chart = c3.generate({
              data: {
                  x: 'x',
                  columns: full,
                  type: 'bar'
              },
              bar: {
                  width: {
                      ratio: 0.8 // this makes bar width 50% of length between ticks
                  }
              },
              axis: {
                  x: {
                      type: 'categorized' // this is needed to load string x value
                  }
              },
              bindto: '#chart'
          });
  </code></pre>
  
  <p>Thanks!</p>