C3: Display multi-word tick labels as multi-line

[webmaven]

When a tick or category label on the x-axis consists of several words, it enforces a fairly large minimum width on the chart in order to keep the labels from overlapping.

Possible solutions:

1. Add an option to add newlines between words in a label, or
2. Automatically insert newlines when the width of the label exceeds the width of the rect.

[masayuki0812]

Thank you for suggestion. I'll try 2 and please give some time.

[lemonzi]

:+1:
Another option is to rotate the label, even completely (vertical).

[sbrunot]

An interesting option would be, for any tick label, to allows the format function to return an array of strings instead of a single string. If an array of string is returned, a multi line label would be created for the tick (one line per entry in the array).

[lemonzi]

Well, in my case it was good to have automatic line wrapping depending on
the total plot size. But it would be a great addition, indeed!

_Quim Llimona_
http://lemonzi.me

2014-10-14 14:27 GMT+02:00 Sebastien Brunot [email protected]:

An interesting option would be, for any tick label, to allows the format
function to return an array of strings instead of a single string. If an
array of string is returned, a multi line label would be created for the
tick (one line per entry in the array).

—
Reply to this email directly or view it on GitHub
https://github.com/masayuki0812/c3/issues/139#issuecomment-59034403.

[masayuki0812]

Thank you for your feedbacks. I implemented this and now it works only on category axis. And you can change the width of tick text by axis.x.tick.width, so if you want to change the width for word break, please use this option.

Btw, I introduced tspan within text for tick text, so please remember this if you're processing text element on your code.

[lemonzi]

Great, thanks a lot! :+1:

[masayuki0812]

Please let me close this issue.