C3: Overlapping x-axis date labels for timeseries

[runeksvendsen]

Here's an example: http://jsfiddle.net/gbdtjsba/1/

It would be nice if c3.js could figure out how many labels to draw, so they don't overlap. Also, tilting labels will help with really long labels, like so: https://i.stack.imgur.com/idpth.png

[tamilsweet]

+1 I'm facing same issue.

[yuvii]

But there's just so much you can put there... If the width is very small, and the labels are very long, what do you expect to happen?

I suggest you use some shorter format, and if you have to, use the rotate option to swing them a little to the side. for example, like this. Other than that you can only give the chart a wider size.

[runeksvendsen]

@yuvii But thanks for the rotation trick! That helps a lot.

Wrt. expected behavior, I guess I expect it to not draw an x-axis label if it overlaps another label. This seems sensible to me. Before drawing a label, if we know it's going to overlap another label, don't draw it. Or perhaps if a label would overlap an already present label, delete the already present label and create the new label, so they don't overlap.

[yuvii]

Do you mean tick culling?

[runeksvendsen]

I mean that c3.js should never draw two labels on top of each other, because it makes no sense (the text of both labels become unreadable).

[yuvii]

Seems to me like a pointless feature to add, because the user can control the appearance pretty well anyway (either by limiting the number of labels, changing the format, turning them to the side or changing the chart width).

It is possible (not even that complicated) by calculating the width of the labels, their relative positions etc. etc. but I think this will mostly result in confused users who don't get why some of the labels are disappearing for "no reason". I think one of the main reasons C3 is so much better than other chart libraries is that it's pretty bare bones, not trying to outsmart the user, but instead allowing him as much control as possible.

But of course, Mayasuki is the one who'll decide if to add this as a feature or not. For now, I think your best bet is to implement this yourself.

[masayuki0812]

As @yuvii wrote, please use axis.x.tick.rotate and other options like axis.x.tick.XXXXX to control the count of the ticks.

[masayuki0812]

Please let me close.

[mezase121]

this happens to me when using datetime and the date is exactly the same but for the time. Solution is to format the date so as to remove the time from it.

[Tarun-Gurnani]

If you are using dates , than always go with timeseries it will mazorly reduce your overlapping and othern than this rotate is nive one .