Chart.js word wrap xaxis labels
I have a bar chart in chart.js/ng-charts which has really long labels on the xaxis. They change to diagonal when they are too long, which i don't want to happen.
I have tried two functions - one which splits them by space, so every word is on a new line - and one which only allows a certain number of characters
However i am trying to just word-wrap them instead. So it will display however many words can fit before going onto the new line.
Does anyone know how to do this
xAxes: [
{
ticks: {
callback: function (label, index, labels) {
if (/\s/.test(label)) {
return label.split(" ");
} else {
return label;
}
callback: function (value) {
return value.substr(0, 25); //truncate
},
},
}
]
Update!!!
I have implemented this code, which should allow only 3 words per line. However, it is only showing on the first bar, despite there being a value for every bar. It also displays with commas between each word. Is there a way to fix this?
callback: function (value) {
value = value.split(" ");
console.log(value);
const output = [];
let chunkSize = 3;
for (
let i = 0, length = value.length;
i < length;
i += chunkSize
) {
output.push(value.slice(i, i + chunkSize));
}
return output;
},
Comments
Post a Comment