ngx-charts -> ngx-charts-bar-vertical xAxis labels multi line

Question

I'm using 'ngx-charts' with Angular, on My X axis labels i have long text. how can i make it wrap on a couple of lines instead of using 3 dots when text overflows?

Update:

tried to add xAxisTickFormating func :

html file:
[xAxisTickFormatting]="xAxisTickFormat"
ts file: 
xAxisTickFormat(val) {
   return val.split(' ').map(i => `${i} \n`).join('');
}

Answer 1

Here's a workaround (see https://github.com/swimlane/ngx-charts/issues/462#issuecomment-783237600 too). You can create a tspan tag within the text tag containing the x label after the chart has been displayed completely. Assume you want to add the text "hello" in the second line of the 5. x-axis label:

const text_el = document.querySelectorAll('g.x.axis g.tick text')[4];
const {width, height} = text_el.getBoundingClientRect();
const tspan_el = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
tspan_el.setAttribute('dx', `-${width}px`);
tspan_el.setAttribute('dy', `${height}px`);
tspan_el.innerHTML = 'hello';
text_el.appendChild(tspan_el);

More background: https://www.oreilly.com/library/view/svg-text-layout/9781491933817/ch04.html