[Chartjs]-Change long labels to multiline(wrap) label in ChartJs

by

7👍

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

1👍

Change label definition to:

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

0👍

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 + '%';
    }
  }
},

Leave a comment