Chartjs-Chart js 3 radar, how to enabe multiline labels

by

1đź‘Ť

âś…

Actually, your variable labels is an array containing strings in this way: ["Je note la qualité du pitch...", "Je donne ma voix pour sélectionner cette startup, sous réserve"]

What you have to do is to make a 2D Array containing your same sentences but splitted in sub array like that : [["Je note la qualité", "du pitch..."], ["Je donne ma voix", "pour sélectionner", "cette startup, sous réserve"]]

By doing this, you should have multi lines sentences, to break your string into multiple strings (chunks), here is a quick implementation :
const newLabels = labels.map(l => l.match(/.{1,n}/g)) where n is your max length per line.

If you want to split your string by number of words, try this chunking implementation :

const splitString = (text, chunkSize) => {
    const arr = text.split(" ")
    const output = []

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

    return output
}

console.log(splitString("Hi this is a sample string that I would like to break down into an array!", 3))

You should obtain this :

[
  [ 'Hi', 'this', 'is' ],
  [ 'a', 'sample', 'string' ],
  [ 'that', 'I', 'would' ],
  [ 'like', 'to', 'break' ],
  [ 'down', 'into', 'an' ],
  [ 'array!' ]
]

2đź‘Ť

You can define the labels as an array of string arrays.

This is described in the Chart.js documentation under Data Structures as follows: "In case you want multiline labels you can provide an array with each line as one entry in the array."

Please take a look at the runnable code snippet below and see how it works.

new Chart('myChart', {
  type: 'radar',
  data: {
    labels: [['Deep', 'Red'], ['Nice', 'Blue'], ['Cute', 'Yellow']],
    datasets: [{
      label: 'My Dataset',
      data: [300, 250, 280],
      borderColor: '#FF6384'
    }]
  },
  options: {
    responsive: false
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<canvas id="myChart" height="200"></canvas>

Leave a comment