How to make the header axis name on 2 lines
ilanl opened this issue · 1 comments
ilanl commented
My axis dimensions have long names,
Is there a way to make them appear on 2 lines nicely ?
berci-i commented
My approach was creating a function which returns a text on 2 lines and than replace the html of the title. (something like:
const getSplittedString = (word, wordsPerLine) => {
const split = word.split(" ");
let i = 1;
let html = `<tspan x="0" dy="1.2em">${split[ 0 ]}`;
if (!wordsPerLine) wordsPerLine = Math.ceil(split.length / 2);
split.slice(1).map((s, index) => {
i++;
html = html + (
index === split.length - 2 ?
` ${s}</tspan>`
:
(i % wordsPerLine == 0 ? ` ${s}</tspan><tspan x="0" dy="1.2em">` : ` ${s}`))
})
return html;
}
)
I am calling this function for each title element and than replace the html, also update the transform property.
Is kind of a weird approach but it does the job.