Best way to achieve multiline text in titles (tspans)

[mestaritonttu]

I noticed from reading the code that title text is split into tspan elements, when an array of strings is provided. Nice! I also noticed legends have the same feature. I guess the docs should be updated for these:

https://apexcharts.com/docs/options/xaxis/
https://apexcharts.com/docs/options/title/
https://apexcharts.com/docs/options/legend/

Anyway, I was trying to achieve multiline text and wondered what would be the ideal way. Just fiddling in the browser dev tools I managed to get the tspans below each other and roughly centered with some quite awkward parameters:

<text id="SvgjsText1120" font-family="Helvetica, Arial, sans-serif" x="77.5" y="359" text-anchor="middle" dominate-baseline="central" font-size="1rem" fill="#373d3f" class="apexcharts-xaxis-title-text " style="font-family: Helvetica, Arial, sans-serif;">
    <tspan id="SvgjsTspan1121" dx="-30">Bla blabla bla blablabla bla bla.</tspan>
    <tspan id="SvgjsTspan1122" dy="24" dx="-240">Blu blublublu blu blublublub blu blubl.</tspan>
</text>

[mestaritonttu]

Bah, I don't know why I became confused: now that I tried it again, I was able to get a more consistent result by setting an x= parameter for both tspans and dy= for the lower one.

Well, I will leave this open in case someone has brilliant ideas on how to deal with this in JavaScript taking into account viewport changes etc.

[junedchhipa]

SVG.js has built-in support for creating multiline texts with tspan. I will see how feasible it is to convert current text into a multiline by using those the newLine() method of svg.js.
https://svgjs.com/docs/2.7/elements/#svg-text

[mestaritonttu]

Ah, that is right - I actually read the documentation, but for some reason I disregarded it and did not test it. Now that I ran the "easy method" in JSFiddle, I see they add x="0" and relative y axis positioning with dy:

<text id="SvgjsText1008" font-family="Helvetica, Arial, sans-serif">
    <tspan id="SvgjsTspan1009" dy="20.8" x="0">Lorem ipsum dolor sit amet consectetur.</tspan>
    <tspan id="SvgjsTspan1010" dy="20.8" x="0">Cras sodales imperdiet auctor.</tspan>
</text>

When testing, I recommend trying with viewport width 320px. I find that simply using x="0" for the lines is not enough, if the line exceeds a certain length (about 70% of the width). It seems the translate function for "apexcharts-inner apexcharts-graphical" affects the initial positioning.

[junedchhipa]

I think that the positioning will not be much of a problem, but aligning the text to the center will require some extra calculations.

[mestaritonttu]

In the best case, text-anchor: middle would be enough.

[junedchhipa]

Ah! I thought that property works just for single line text, it works for tspan if applied to the parent text as well. Will give it a go.

[andersonscherrer]

Is sameone working on it? svg.js is on v3.0 it does not support this feature yet?

[mestaritonttu]

Is sameone working on it? svg.js is on v3.0 it does not support this feature yet?

Apexcharts is not yet shipping with svg.js 3.0. However, the docs are now updated for 3.0: https://svgjs.com/

[junedchhipa]

Yeah, the work is under progress.
Here's a sneak peek.

It will be finished in a couple of days.