Drill down capabality in C3.js

Question

I have a simple bar chart that displays two teams. Here is the screenshot.

Now for instance if I click on bulls it should show drill down and show another bar graph which will have 5 bars each representing a player from the bulls. If i click on Lakers it should drill down and show another bar graph which will have 5 bars each representing a player from the Lakers.

For instance After I click on bulls it should show something like this.

So in short I am looking for drill down feature. This is the code I have so far.

Here is the code I have so far and here is my FIDDLE.

var chart = c3.generate({
    data: {
        columns: [
            ['bulls', 30],
            ['lakers', 50],
        ],
        type : 'bar'

    },           

});

I would appreciate on knowing how to achieve this or even if someone can edit my fiddle to show me some dummy example.

Answer 1

You'd simply need to determine which data point had been clicked, then load in the player data and unload the team data.

onclick: function (d, element) {
    chart.load({
        unload: ['bulls', 'lakers'],
        columns: <player data for the clicked team>
    });
}

Updated fiddle: http://jsfiddle.net/mcuepavh/1/