Stacking Xaxis dataKey text

[matiassemelman]

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

Open the codeSandbox

What is expected?

I need the overlapped (too long) text to word-wrap below, so it can be read

What is actually happening?

Text is overlapping

Environment	Info
Recharts	v2.12.5
React	react/18.2
System	Ubuntu
Browser	Chrome

[ckifer]

The Text component is an SVG and the SVG spec does not support word-wrapping

I would recommend angling you ticks and potentially cutting them off at a certain length with tickFormatter

We could potentially add a feature to wrap tick text using tspans, but recharts currently does not have anything that will do that

[matiassemelman]

How tough :(
could someone have a workaround to achieve this?
Even if it's a solution outside of what recharts offers, still useful!

[ckifer]

https://stackoverflow.com/questions/4991171/auto-line-wrapping-in-svg-text

We can use foreignObject and go outside of the svg container