C3: force line break in x axis tick text

Created on 17 Oct 2014 · 9Comments · Source: c3js/c3

Hey

I have fairly long labels in my graph. I have added a hard height of 500px to the graph, and 200px to the x axis which works, but I'd like to make the axis height dynamic if possible.

Should I loop through the labels to find the largest one and calculate it's width before applying the graph, or does c3 have a feature which can do this?

Might be related to this one: https://github.com/masayuki0812/c3/issues/527

Thanks for a great library, so far it has saved me many hours of d3 programming :)

C-feature-request

Source

daviestar

👍1

Most helpful comment

It seems not woking in fiddles.. How about on actual code? It works for me. And please set axis.x.tick.multiline = false to show as one line. Now multiline is default.

I think it seems reasonable to introduce something to force line breaks. I'll implement if needed.

masayuki0812 on 9 Nov 2014

👍7

All 9 comments

Hi, Thank you for your reporting. I think this commit enables to calculate x axis height automatically, so could you try the latest code again? Thanks.

UPDATE:
I introduced axis.x.tick.width to support multiple lines tick text, so please set this option null at this moment. Without this, the tick text will be splitted to multiple lines even if they are rotated.

masayuki0812 on 3 Nov 2014

👍2

Hello,

Thanks for your update, unfortunately I don't think it's working -

http://jsfiddle.net/gbdtjsba/15 - Without the 200px x axis height (which I am trying to remove), the results are the same as before. Try resizing the graph to see inconsistent behaviour.
http://jsfiddle.net/gbdtjsba/11 - On load the x axis appears to have the wrong height, but this is fixed when you resize. This version still has 200px height on x axis, and I think it is reverting to this height, not a calculated one.

I think what needs to happen is, for example, the graph has 500px height, the axis ticks have a maximum width/height of 125px, so the chart is automatically given height 375px and labels 125px. Or, if you prefer / as an option, the ability to make the graph height 500px, and the overall height including labels becomes 625px.

Labels on 1+ lines is great. Is it possible to force line breaks? For example 2014-10-22 \n 2014-10-15 \n 2014-10-08?

daviestar on 5 Nov 2014

It seems not woking in fiddles.. How about on actual code? It works for me. And please set axis.x.tick.multiline = false to show as one line. Now multiline is default.

I think it seems reasonable to introduce something to force line breaks. I'll implement if needed.

masayuki0812 on 9 Nov 2014

👍7

I think it seems reasonable to introduce something to force line breaks. I'll implement if needed.

Yes. Needed.

format1981 on 1 Dec 2014

👍1

any plans for this?

laurabrooks on 31 May 2018

@laurabrooks I'm not sure what you're referring to with "this", but axis.x.tick.multiline has been implemented for a while and I recently introduced support for axis.x.tick.multilineMax and added documentation for both (see here), hopefully that helps.

jcsmorais on 31 May 2018

😄1

I was wondering about forcing a line break at a specified point in label text. multiline and multilineMax attributes will do the job though, thank you for the response @jcsmorais

laurabrooks on 31 May 2018

👍3

Hey is there any provision for multiline axis labels?