C3: Bar Chart

HTML

<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<link rel="stylesheet" href="https://rawgit.com/masayuki0812/c3/master/c3.css">
<div id="chart"></div>

JavaScript

var inp = {group1: 3, group2: 4, group3: 2};
var rec = {group1: 6, group2: 1, group3: 3};
var res = {group1: 9, group2: 3, group3: 2};
var targets = {
  lblInp: inp,
  lblRec: rec,
  lblRes:res
};
var cols = [];
var lbls = [ 'x' ];
for (var lbl in targets) {
  lbls.push(lbl);
  var target = targets[lbl];
  var cat = [ lbl ];
  for (var i in target) {
  	if (target.hasOwnProperty(i)) {
      cat.push(target[i]);
    }
  }
  cols.push(cat);
}
cols.unshift(lbls);

console.log(cols);

    var chart = c3.generate({
        bindto: '#chart',
        data: {
            x: 'x',
            columns: cols,
            type: 'bar',
            colors: {
                InProgress: '#0f71ae',
                Recieved: '#907abc',
                Resolved: '#529026',
//                Suspend: '#f4a309',
//                AttentionRequired: '#b30a1c'
            },
            color: function (color, d) {
                // d will be 'id' when called for legends
                return d.id && d.id === 'data3' ? d3.rgb(color).darker(d.value / 150) : color;
            }
        },
        bar: {
            width: {
                ratio: 0.5
            }
        },
        axis: {
            x: {
                type: 'category',
                tick: {
                    multiline: false
                },
            }
        }
    });