Apexcharts.js: Add linebreaks on noData text

[igormartimiano]

I had a problem where I had a big text to be displayed when noData was set. On mobile, I needed it to break in several lines so the entire text would be displayed correctly. Couldn't find a way to it using the lib, had to do some js append <*tspan>s to take care of that after it was rendered.

I'm not exactly familiar to SVGs but I've first imagined that an ideal solution would be to specify a max-width to the the where noData is displayed, although I later found out that this isn't possible: https://stackoverflow.com/a/16701952/7837637.
According to that same answer, we could use <textArea>.. but that would also limit the support for SVG 1.1.
So, maybe passing a max character length prop for every line until it breaks? We could use it to render multiple <tspan> which would do the job. Don't know if that is exactly ideal either.

Thank you

[junedchhipa]

Multi-line texts in SVG are a bit tricky and the solution provided in your stack-overflow link is not very feasible.
<foreignObject> is something to consider but it is not supported in IE.

[junedchhipa]

From the next version, you will be able to add multiline texts in the nodata options.

noData:{
  text: ['No data available', ' Please try later']
}

[igormartimiano]

Good one! Thank you 😄

[MauricioPaez]

Hi there! It would be nice if you could update the ApexNoData interface to follow this functionality

Thanks for your awseome work 😃