[Chartjs]-Chartjs break line for axes tick labels text

by

19👍

✅

If you want your xAxis label to wrap text then you need to pass the data in this format labels: [['LONG', 'LONG', 'LONG', 'LABEL'], "Blue", ['YELLOW', 'LONG'], "Green Green", "Purple", "Orange"]

So in your case -> labels:[['Arts Language', 'and Communication'], 'nextLabel', 'otherLabel']

See a working demo: http://jsfiddle.net/Lzo5g01n/11/

0👍

If you want your xAxis label to wrap text then you need to pass the data in this format labels: [[‘LONG’, ‘LONG’, ‘LONG’, ‘LABEL’], "Blue", [‘YELLOW’, ‘LONG’], "Green Green", "Purple", "Orange"]

So in your case -> labels:[[‘Arts Language’, ‘and Communication’], ‘nextLabel’, ‘otherLabel’]

See a working demo: http://jsfiddle.net/Lzo5g01n/11/

Adding auto-labels wrap:

    ticks: { 
        callback: val => [val.slice(x,y), val.slice(y)], 
    }

0👍

I came across the same problem.
Here’s what I did:

const labels = ["label1","label2","label3"];
ticks: {
    autoSkip: false,
    maxRotation: 0,
    callback: (value: any, index: any, values: any) => {
        let label = labels[value];
        if(label == null){
            return '';
        }
        if (label.length > 15) {
            label = label.substring(0, 15);
            label += '..';
        }
            return label;
    },
},

Labels is your x values.
This tick configuration, along with maxRotation and autoSkip, makes your xLabels end with ellipsis if they’re too big.
E.g.: If the label is "Arts Languages and Communication", it should become "Arts Languages.."
You can still see the full label with the tooltip.

Leave a comment