Chartjs-ChartJS – Bottom labels displayed vertically

In the xAxe ticks attribute, you can edit the userCallback property to change what is displayed on your labels. Furthermore, if you return an array of strings, every string will be displayed with line breaks.

So if you combine these two informations, you’ll get the following :

options: {
    scales: {
        xAxes: [{
            ticks: {
                userCallback: function(tick, value, ticks) {
                    // `ticks` is the default display
                    // `.split("")` makes it an array of every character
                    return tick.split("");
                }
            }
        }]
    }
}

You can see a working example on this jsFiddle and here is its result :