[Solved]-change long labels to multiline(wrap) label in ChartJs-Chart.js

you can change the long label name to an array, chartjs will split each element into a line , this exemple worked for me :

labels: ['dab', ['park', 'assist'], ['lane', 'assist'], ['smartphone', 'interface'], 'gps', 'led']

but, in this case, when you pass the mouse over the chart, the tooltip shown will seperate each line by a comma, in my case ['park', 'assist'] will be shown on tooltip as "park,assis". to resolve this problem you have to remove the comma by a space in tooltips callback, like this :

tooltips: {
  enabled: true,
  callbacks: {

    title: function(tooltipitem, data) {
      return data.labels[tooltipitem.index];
    },
    label: function(tooltipitem, data) {
      let dataval = data.datasets[tooltipitem.datasetindex].data[tooltipitem.index];
      let dslabels = data.labels[tooltipitem.index];

      // remove the comma

      dslabels = dslabels.tostring().replace(",", " ");

      return ' ' + dslabels + ' : ' + dataval + '%';
    }
  }
},

change label definition to:

 labels: [["2016-02-11", "19:59:24"], ["2016-02-11","20:59:24"]]

according to the official sample repo you should put the single lines into another array:

data: {
    labels: [['june', '2015'], 'july', '...', ['january', '2016'], 'february', '...'],
    // rest of config

in this case june 2015 and january 2016 would have a new line for the year, the rest of the labels would not be wrapped.

the example is from a line chart, i tested it with a bar chart too, but it should work for all chart types.

tested with version 2.7.2 of chartsjs