1

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

Nithin A
  • 374
  • 1
  • 2
  • 18

1 Answers1

0

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/

potatopeelings
  • 40,709
  • 7
  • 95
  • 119
  • I have considered this option,but the problem is since height is constant if the labels are small there will be huge gap between the axis and x axis label ,or if the label height exceeds 60 again they will overlap.I want to adjust the axis label position dynamically after the tick labels end. – Nithin A Aug 27 '15 at 03:42
  • Could you post the code that you have so far in a fiddle? Cheers! – potatopeelings Aug 27 '15 at 03:47
  • Your text is getting clipped off because it won't fit in the SVG. Even if it overflows the g element it will still be shown. What you'll need to do is set the above axis.x.height depending on your label lengths. – potatopeelings Aug 27 '15 at 07:50