Problems with X axis position modification in C3

Question

I want to modify the x-axis position from bottom to top in the graph drawn with C3. Depending on the circumstances may be used to D3.

xAxis is top position photo

I refer to this website. ->click here. refer site.

var chart = c3.generate({ data: { columns: [ ['data1', 30, 200, 100, 400, 150, 250], ['data2', 50, 20, 10, 40, 15, 25] ], types: { data1: 'bar', } }, axis: { rotated: true } }); — 김규현, Sep 08 '17 at 08:26
The code of the link above is exactly the same. I could not think of anything more than that. I do not know how to do it. @RealCheeseLord — 김규현, Sep 08 '17 at 08:27

score 0 · Accepted Answer · answered Sep 15 '17 at 09:13

Don't know of a method in the c3 api that does it, but a bit of d3 tinkering in the onrendered function (along with a bit of padding) will do the job

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
        ],
        types: {
            data1: 'bar',
        }
    },
    axis: {
        rotated: true,
    },
    padding: {
        top: 10,
    },
    onrendered: function () {
        var axis = d3.selectAll(".c3-axis-y");
        axis
            .attr("transform", "translate(0,0)")
            .selectAll(".tick line")
            .attr("transform", "translate(0,-6)")
        ;
        axis.selectAll(".tick text")
            .attr("transform", "translate(0,-25)")
        ;
    }
});

http://jsfiddle.net/vk6rdty1/

Your code was a lot of help. That's exactly what I found. – 김규현 Sep 18 '17 at 08:09 — 김규현, Sep 18 '17 at 08:09

Problems with X axis position modification in C3

1 Answers1