score:1

Use this

bar: {
    width: {
        ratio: 0.5 // this makes bar width 50% of length between ticks
    }

score:2

here is the way in c3 to achieve what you want. you are not able to creat space between different columns as per my knowledge.

var chart = c3.generate({
      data: {
        columns: [
            ['barData', 30, 130, 130]
        ],
         type: 'bar'
    },
    axis: {
        x: {
            type: 'category',
            categories: ['data1', 'data2', 'data3']
        }
    },
    bar: {
        width: 50,
    }

});

score:3

Thanks to @zohaib-ijaz's comment. I came up with:

d3.selectAll(".c3-target-nameofyourclass")
    .selectAll(".c3-bar")
    .attr("transform", "translate(-5, 0)");

to move the bars from column "nameofyourclass" 5 pixels to the left.

score:9

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30],
            ['data2', 130],
            ['data3', 130]

        ],
        type: 'bar'
    },
    bar: {
        space: 0.25
    }
});

Related Query

More Query from same tag