Add space between column label and x-axis label c3 chart

Here's what the chart looks like, and I am trying to some margin between column labels and x-axis label.

I tried adding this style

text.c3-axis-x-label {
        margin-top: 10px ;
    }

Is there any property to increase the space?

Padding is what you need --> https://c3js.org/reference.html#padding-bottom

Add this with the value of your choice (in pixels) to your chart configuration -->

padding: {
    bottom: 50,
},

e.g. https://jsfiddle.net/56k48r70/

(margin-top won't work as it's a css property for html elements, whereas c3 is all svg elements)

Edit:

Ha, I completely didn't read your question properly. I assumed the text at the bottom of the chart was the legend rather than the x-axis label.

It's still doable, what you have to change as well is the "dy" attribute of that text label (this is an attribute rather than css so has to be done in code)

Add this to your config:

 onrendered: function () {
                d3.select(this.config.bindto).select(".c3-axis-x-label").attr("dy", "60px");
        },

This will move the x axis label down however much you want by changing the 60px value. You will still need the padding though, as otherwise the label may get moved out of the visible chart area. i.e. in the following fiddle if you remove the bottom padding the x axis label will disappear under the green div:

https://jsfiddle.net/zygrjut4/

Sorry for not reading your q properly!