Chart.js word wrap xaxis labels

I have a bar chart in chart.js/ng-charts which has really long labels on the xaxis. They change to diagonal when they are too long, which i don't want to happen.

I have tried two functions - one which splits them by space, so every word is on a new line - and one which only allows a certain number of characters

However i am trying to just word-wrap them instead. So it will display however many words can fit before going onto the new line.

Does anyone know how to do this

 xAxes: [
    {
      ticks: {
         callback: function (label, index, labels) {
           if (/\s/.test(label)) {
             return label.split(" ");
           } else {
             return label;
           }

        callback: function (value) {
          return value.substr(0, 25); //truncate
        },
       },   
    }
   ]

Update!!!

I have implemented this code, which should allow only 3 words per line. However, it is only showing on the first bar, despite there being a value for every bar. It also displays with commas between each word. Is there a way to fix this?

        callback: function (value) {
          value = value.split(" ");
          console.log(value);
          const output = [];
          let chunkSize = 3;

          for (
            let i = 0, length = value.length;
            i < length;
            i += chunkSize
          ) {
            output.push(value.slice(i, i + chunkSize));
          }

          return output;
        },     

    


Comments

Popular posts from this blog

Spring Elasticsearch Operations

Network Error and Timeout on Authorize.net JS

Object oriented programming concepts (OOPs)