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('');
}
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
) unfortunately. – Youp Bernoulli Sep 19 '22 at 08:42