Word-wrap overflown X-axis labels

https://github.com/recharts/recharts/issues/198

This is supposedly fixed by https://github.com/recharts/recharts/pull/243 but it doesn’t seem to work.

How do I use it? <XAxis dataKey="name" interval={0} width={30} label={<Text width={30} />} />? @techniq

[lisamartin00]

I was finally able to figure it out based on their Line Chart Example fiddle, which uses a custom component passed into the <XAxis> tick property. https://jsfiddle.net/alidingling/5br7g9d6/

You can do something similar to what they’ve done and return the <Text> element https://jsfiddle.net/lisamartin00/exasjofp/ Now you can set a fixed width and the text will wrap. You may still need to write some custom media queries to adjust the font-size for smaller screen widths, e.g. @media screen and (max-width: 480px){ .recharts-cartesian-axis-ticks { font-size: 10.5px; }

[deadlyfingers]

If you need word wrap on long string or word which has no spaces I have a fiddle which shows how to chunk long text strings and splits it up into multiple tspan elements. https://jsfiddle.net/deadlyfingers/jngsxqyo/85/