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 cat = [];
var inp = {group1: 3, group2: 0, group3: 0};
var rec = {group1: 6, group2: 1, group3: 3};
var res = {group1: 9, group2: 3, group3: 0};
for (i in inp) {
        if (inp.hasOwnProperty(i)) {
            cat.push(i)
        }
    }
    cat.unshift('x');
    
    var chart = c3.generate({
        bindto: '#chart',
        data: {
            x: 'x',
            columns: [
            cat,
            ['Rec', 5, 1, 4, 8, 5, 3],
            ['InP', 7, 2, 7, 9, 7, 3],
            ['Res', 10, 5, 2, 9, 5, 2],
        ],
            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
                },
            }
        }
    });