Display text on multiple lines

I was trying to customise the “textForPercentage” function and pass it a newline (<br/>) tag but html tags get removed. Is there an easy way to keep the percentages displayed (and animated) and just display a text below the percentage? Like in this picture

This is how I tried to call textForPercentage:

textForPercentage={(p) => { return `${p}%<br/>sold` }}

If html is not desired, maybe just support the “\n” newline character and replace it with a <br/> on display? So

textForPercentage={(p) => { return `${p}%\nsold` }}

would also be a valid option

[kevinsqi]

That approach seems possible, but I think a pure svg approach is tricky in general. The approach I’ve recommended is wrapping the base CircularProgressbar in another component that overlays regular html content on top of it with absolute positioning. This allows using regular html elements instead of adding custom behavior around newlines or delving into SVG formatting.

You can try it out here: https://codesandbox.io/s/qlr7w0rm29

Let me know if that would address your needs!

[kevinsqi]

Documentation added to README here: https://github.com/iqnivek/react-circular-progressbar/commit/04c3d6e311be7c277e612346e3e9c41e68651f98, so closing this out now!