score:17

Accepted answer

you were using chartjs version 2.1.3 in your jsfiddle, which does not seem to handle multiline labels

you can use multilines labels with the following solutions:

var dates = [["some l-o-o-o-o-", "o-o-o-o-o-o-o-", "n-n-n-n-n-n-g-g-g-", "g-g-g-g label"], "ddd", ["eee", "fff", "ggg"], "hhh", "iii"];

you can replace a label by an array, and each element of the array will be considered as a new line (see jsfiddle): https://jsfiddle.net/cyuwxh3q/


if your labels are generated dinamically, you can split them with a plugin in your chart configuration :

type: 'bar',
data: {...},
options: {...},
plugins: [{
    beforeinit: function (chart) {
        chart.data.labels.foreach(function (value, index, array) {
            var a = [];
            a.push(value.slice(0, 5));
            var i = 1;
            while(value.length > (i * 5)){
                a.push(value.slice(i * 5, (i + 1) * 5));
                i++;
            }
            array[index] = a;
        })
    }
}]

this function will turn each label into an array of element which length is less or equal to the given value (here 5) (see jsfiddle) : https://jsfiddle.net/jhr5nm17/


those are two easy ways to handle long labels by replacing them by multiline labels, hope it helps.


Related Query

More Query from same tag