Trying to create a grouped and stacked bar chart but having some trouble

Question

I'm trying to create a grouped and stacked bar chart but having a little trouble understanding how to do this with c3js. This tutorial is great and shows me a nicely grouped chart.

http://blog.trifork.com/2014/07/29/creating-charts-with-c3-js/

I'm looking for something similar but to have those stacked 2 data sets per bar. My data looks like:

columns: [
  ['x', 'data1', 'data2'],
  ['Jan', {data1: 20, data2: 80}, {data1: 80, data2: 20}, {data1: 20, data2: 80}]
  ['Feb', {data1: 20, data2: 80}, {data1: 80, data2: 20}, {data1: 20, data2: 80}]
  ['Mar', {data1: 20, data2: 80}, {data1: 80, data2: 20}, {data1: 20, data2: 80}]
]

I would like the chart to have groups of Jan, Feb, Mar. Then have 3 stacked bars labeled within each group. Any ideas if this is possible and how might it be possible, if at all.

Thanks!

Answer 1

Are you wanting something like this? -->

http://jsfiddle.net/3r39gknt/1/

If so, the data1 and data2 fields will need renamed per the example. If not, draw/scan a picture/sketch of what you'd expect - groups in c3 are the data elements involved in each stack, but I've interpreted rightly or wrongly your use of month 'groups' as being different points on the x-axis.

var chart = c3.generate({
    data: {
        columns: [ // randomish data
            ['data1', 30, 200, 200],
            ['data2', 130, 100, 100],
            ['data3', 230, 220, 200],
            ['data4', 230, 220, 200],
            ['data5', 230, 200, 210],
            ['data6', 230, 190, 200]
        ],
        type: 'bar',
        groups: [
            ['data1', 'data2'],
            ['data3', 'data4'],
            ['data5', 'data6'],
        ],
        order: null,
        colors: {
            data1: '#f00',
            data2: '#00f',
            data3: '#f33',
            data4: '#33f',            
            data5: '#f66',
            data6: '#66f'
        }
    },
    bar: {
        width: {
            ratio: 0.5 // this makes bar width 50% of length between ticks
        }
    },
    axis: {
        x: {
            type: 'category',
            categories: ['january', 'february', 'march']
        }
    }
});