Increase height of group element(<g>) in svg

Question

I am using c3js for generating charts.My data has columns whose names are very large.So when the chart is rendered these tick labels are colliding with the xaxis label(placed at outer-center). If I move the xaxis label down I could clearly see the text labels.But The containing group elements height(WHICH IS AUTOMATICALLY CALCULATED) makes this label invisible if I move it down. If I increase the height I could accommodate these labels with sufficient space between them.

Thanks

Answer 1

You don't need to move the x axis label (I assume you mean title) down manually. There is a configuration that you can change - axis.x.height (see http://c3js.org/reference.html#axis-x-height)

You use it like so

...
axis: {
    x: {
        height: 60,
        ...

---

Fiddle - http://jsfiddle.net/oven6x7k/