I am trying to figure out, if there is a way to access the values from the Company data array in the onclick event. So far using the api functions I only get to the Users array.

var chartCompany = c3.generate({
    bindto: '#users-chart',        
    data: {
        x: 'Company',
        url: '/ajax_call',
        mimeType: 'json',
        type: 'bar',
        axes: {
            Company: 'x'
        },
        onclick: function (d, i) { console.log(chartCompany.data()); }
    },
    axis: {
        x: {
            type: 'category',
             show: false
        },
    }
});

And the json response from the server:

{
 "Company": ["Company 1", "Company 2", "Company 2"],
 "Users"  : [10, 20, 30]
}

Any help/ideas will be highly appreciated.

[Edit 1] To elaborate on my question: When clicking on a data from Users (which is displayed as bars) I would like to get the corresponding Company.

[Edit 2] Working static example: /

I am trying to figure out, if there is a way to access the values from the Company data array in the onclick event. So far using the api functions I only get to the Users array.

var chartCompany = c3.generate({
    bindto: '#users-chart',        
    data: {
        x: 'Company',
        url: '/ajax_call',
        mimeType: 'json',
        type: 'bar',
        axes: {
            Company: 'x'
        },
        onclick: function (d, i) { console.log(chartCompany.data()); }
    },
    axis: {
        x: {
            type: 'category',
             show: false
        },
    }
});

And the json response from the server:

{
 "Company": ["Company 1", "Company 2", "Company 2"],
 "Users"  : [10, 20, 30]
}

Any help/ideas will be highly appreciated.

[Edit 1] To elaborate on my question: When clicking on a data from Users (which is displayed as bars) I would like to get the corresponding Company.

[Edit 2] Working static example: http://jsfiddle/et37a9t2/

• javascript
• json
• d3.js
• c3.js
• c3

Share Improve this question Follow edited May 28, 2015 at 23:31 stefita asked May 28, 2015 at 7:10 stefitastefita 1,79322 gold badges2020 silver badges3535 bronze badges 2

• I'd be happy to help, but can you put together a fiddle of your chart without the ajax call, just a standalone version? – Sean Commented May 28, 2015 at 17:48
• I put up a working example: jsfiddle/et37a9t2 – stefita Commented May 28, 2015 at 23:33

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

After a lot of trying out different things, I finally just looked at the chart object itself and discovered a property categories. This is populated, when the x-axis is declared to be of type category as it is in my case. So to get the data from the x-axis one needs to call the .categories() function.

        ...
        },
        onclick: function (d, i) { console.log(chartCompany.categories()[d.index]); }
    },
    ...

When clicking on a bar in the chart the corresponding category will be returned.