score:15

Accepted answer

you can use the following chart plugin :

plugins: [{
   beforeinit: function(chart) {
      chart.data.labels.foreach(function(e, i, a) {
         if (/\n/.test(e)) {
            a[i] = e.split(/\n/);
         }
      });
   }
}]

add this followed by your chart options

ᴜꜱᴀɢᴇ :

add a new line character (\n) to your label, wherever you wish to add a line break.

ᴅᴇᴍᴏ

var chart = new chart(ctx, {
   type: 'horizontalbar',
   data: {
      labels: ['jan\n2017', 'feb', 'mar', 'apr'],
      datasets: [{
         label: 'bar',
         data: [1, 2, 3, 4],
         backgroundcolor: 'rgba(0, 119, 290, 0.7)'
      }]
   },
   options: {
      scales: {
         xaxes: [{
            ticks: {
               beginatzero: true
            }
         }]
      }
   },
   plugins: [{
      beforeinit: function(chart) {
         chart.data.labels.foreach(function(e, i, a) {
            if (/\n/.test(e)) {
               a[i] = e.split(/\n/);
            }
         });
      }
   }]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.6.0/chart.min.js"></script>
<canvas id="ctx"></canvas>

score:19

if you want to have full control over how long labels are broken down across lines you can specify the breaking point by providing labels in a nested array. for example:

var chart = new chart(ctx, {
...
  data: {
    labels: [["label1 line1:","label1 line2"],["label2 line1","label2 line2"]],
    datasets: [{
...
});

Related Query

More Query from same tag